Cookies Time with Mongo + Backbone

by JoshGough

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<input id="searchTerm" placeholder="Search" /> <button id='Search' data-cmd='search'>Search</button>
<br/>

<button data-cmd='add'>New Recipe</button> <button data-cmd='save'>Save</button> 
<hr />
<div id='form'></div>

CSS

/* Date */
.bbf-date .bbf-date {
  width: 4em
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 5em;
}


/* DateTime */
.bbf-datetime select {
  width: 4em;
}


/* List */
.bbf-list .bbf-add {
  margin-top: -10px
}

body {
    border: 5px solid black;
    padding-top: 5px;
}

.control-label {
    background: #fcfcfc;
    font-weight: bold;        
    padding-right: 5px;
}

.bbf-list li {
  margin-bottom: 5px
}

.bbf-list .bbf-del {
  margin-left: 4px
}


/* List.Modal */
.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}

CoffeeScript

makeUrl = (fragment) ->
    return "https://api.mongolab.com/api/1/databases/tastily/collections/recipes/" + fragment + "?apiKey=bWK-cL1WKkJF6yyunAhSjhszvkkTTOlM"

makeUrlWithQuery = (fragment, query) ->
    return makeUrl(fragment) + "&" + query

window.add = ->
    renderRecipe new Recipe()
    
window.save = ->
    model = form.getValue()
    newRecipe = new Recipe(model)
    newRecipe.save().done (data) ->
        console.log data

window.search = ->
    searchTerm = $('#searchTerm').val()
    if searchTerm != ''
        recipes = new Recipes()
        recipes.search(searchTerm).done (data) ->
            if recipes.length > 0                
                renderRecipe recipes.at 0
            else 
                console.log 'No results'
    else
        console.log 'no search term'

rVals = ['required']
       
Recipe = Backbone.Model.extend
  url: ->
    if not @isNew()
        return makeUrl @id
    return makeUrl ""
  schema:
    name:
      type: "Text"
      title: "Recipe name"
      validators: rVals        
    meal:
      type: "Select"
      title: "Meal category"
      options: ["Breakfast", "Lunch", "Dinner", "Dessert"]        
    authorEmail:
      validators: ["required", "email"]
    summary:
      type: "TextArea"
      validators: rVals
    ingredients:
      type: "List"
      title: "Ingredients list"
      itemType: "Object"
      itemToString: (item) ->
        item.name + " (" + item.measure + ")"
      subSchema:
        name:
          type: "Text"
          validators: rVals
        description: "Text"
        measure:
          type: "Text"
          validators: rVals
    preparation:
      type: "TextArea"
      title: "Preparation"
      validators: rVals
    servingInfo: "Text"
    servingCount: "Number"

Recipes = Backbone.Collection.extend(
    model: Recipe
    url: -> 
        if @searchTerm?
            searchTerm = @searchTerm
            @searchTerm = null
            query =...