Cookies Time

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">

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

$ ->
    Backbone.Form.editors.List.Modal.ModalAdapter = Backbone.BootstrapModal

    rVals = ['required']
    
    Recipe = Backbone.Model.extend(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) ->
                return 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'
    )
    
    grammyCookies = new Recipe(
        meal: 'Dessert'
        name: "Grammy's Vegan Chocolate Chip Cookies"
        authorEmail: '[email protected]'
        summary: 'Awesome cookies that will make you fat and double-chinned, like my grandsons in Georgia'
        ingredients: [
            name: 'Flour'
            description: 'Whole wheat preferred'
            measure: '2.5 cups'
        ,
            name: 'Enjoy Life semi-sweet Vegan chocolate chips'
            measure: '1/2 cup'
        ]
        preparation: 'Mix it up and cook at 350 on a parchment sheet! Feed dough to Aiden'
        servingInfo: 'Can increase servings if you make smaller dough balls.'
        servingCount: '24 cookies'
    )
 
    #The form
    form = new Backbone.Form(model: grammyCookies).render()
 ...