app.js

  1 var app = app || {};
  2 
  3 $(function() {
  4      app.PlantView = Backbone.View.extend({
  5                 
  6         tagName: "li",
  7 
  8         template: _.template($('#plant-template').html()),
  9                 
 10         events: {
 11             "click .toggle"     : "toggleFinished",
 12             "dblclick label"    : "edit",
 13             "click .destroy"    : "clear",
 14             "keypress .edit"    : "updateOnEnter",
 15             "blur .edit"        : "close"
 16         },
 17 
 18         initialize: function() {
 19             this.model.bind('change', this.render, this);
 20             this.model.bind('destroy', this.remove, this);
 21         },
 22 
 23         render: function() {
 24             this.$el.html(this.template(this.model.toJSON()));
 25             this.$el.toggleClass('finished', this.model.get('fin
 26             this.input = this.$('.edit');
 27             return this;
 28         },
 29 
 30         toggleFinished: function() {
 31             this.model.toggle();
 32         },
 33 
 34         edit: function() {
 35             var edit_view = new app.PlantModalView();
 36             edit_view.render();
 37 
 38             var $modalEl = $('#modal');
 39             $modalEl.html(edit_view.$el);
 40             $modalEl.modal();
 41         },
 42 
 43         close: function() {
 44             var value = this.input.val();
 45             if (!value) this.clear();
 46             this.model.save({name: value});
 47             this.$el.removeClass("editing");
 48         },
 49 
 50         updateOnEnter: function(e) {
 51             if(e.keyCode == 13) this.close();
 52         },
 53 
 54         clear: function() {
 55             this.model.destroy();
 56         }
 57     }); 
 58         
 59         
 60 });     

index.html

<section id="grocalapp">
 34             <header id="header">
 35                 <h1>plants</h1>
 36                 <input id="new-plant" placeholder="New plant" au
 37             </header>
 38 
 39             <section id="main">
 40                 <ul id="plant-list"></ul>
 41             </section>
 42 
 43             <footer id="footer"></footer>
 44         </section>
 45 
 46         <div id="modal"></div> 
 47             
 48         <script type="text/template" id="plant-template">
 49             <div class="view">
 50                 <label><%- name %></label>
 51                 <button class="destroy"></button>
 52             </div>
 53         </script>
 54             
 55         <script type="text/template" id="plant-template-modal">
 56             <div class="modal-header">
 57                 <h2>Plant Info</h2>
 58             </div>
 59             <div class="modal-body">
 60                 <label>Name</label>
 61                 <input id="name" type="text" value="<%- name %>"
 62                 <label>Age</label>
 63                 <input id="age" type="text" value="<%- age %>">
 64             </div>
 65             <div class="modal-footer">
 66                 <button class="btn">Cancel</button>
 67                 <button class="btn-default">Save</button>
 68             </div>
 69         </script>
 70 
 71         <script type="text/template" id="stats-template">
 72             <span id="plant-count"><strong><%= remaining %></str
 73             <ul id="filters">
 74                 <li>
 75                     <a class="selected" href="#/">All</a>
 76                 </li>
 77                 <li>
 78                     <a href="#/active">Active</a>
 79                 </li>
 80                 <li>
 81                     <a href="#/completed">Completed</a>
 82                 </li>
 83             </ul>
 84         </script>

plant.js

var app = app || {};
  2 
  3 (function() {
  4      
  5     app.Plant = Backbone.Model.extend({
  6 
  7         defaults: function() {
  8             return {
  9                 name: "unknown...",
 10                 age: 1,
 11                 finished: false
 12             };
 13         },  
 14 
 15         toggle: function() {
 16             this.save({finished: !this.get("finished")});
 17         },
 18     });     
 19         
 20 }());       

PlantModalView

  1 var app = app || {};
  2 
  3 $(function() {
  4      app.PlantModalView = Backbone.View.extend({
  5         model: app.Plant,
  6 
  7         el: "#modal",
  8 
  9         template: _.template($('#plant-template-modal').html()),
 10 
 11         events: {
 12             "click .save"     : "close",
 13         },
 14 
 15         initialize: function() {
 16             this.model.bind('destroy', this.remove, this);
 17         },
 18 
 19         render: function() {
 20             this.$el.html(this.template(this.model.toJSON()));
 21             this.name = this.$('#name');
 22             this.age = this.$('#age');
 23             return this;
 24         },
 25 
 26         close: function() {
 27             var name = this.name.val();
 28             var age = this.age.val();
 29             if (!value && !age) this.clear();
 30             this.model.save({name: name, age: age});
 31         },
 32 
 33         clear: function() {
 34             this.model.destroy();
 35         }
 36     });
 37 
 38 
 39 });

PlantView

  1 var app = app || {};
  2 
  3 $(function() {
  4      app.PlantView = Backbone.View.extend({
  5                 
  6         tagName: "li",
  7 
  8         template: _.template($('#plant-template').html()),
  9                 
 10         events: {
 11             "click .toggle"     : "toggleFinished",
 12             "dblclick label"    : "edit",
 13             "click .destroy"    : "clear",
 14             "keypress .edit"    : "updateOnEnter",
 15             "blur .edit"        : "close"
 16         },
 17 
 18         initialize: function() {
 19             this.model.bind('change', this.render, this);
 20             this.model.bind('destroy', this.remove, this);
 21         },
 22 
 23         render: function() {
 24             this.$el.html(this.template(this.model.toJSON()));
 25             this.$el.toggleClass('finished', this.model.get('fin
 26             this.input = this.$('.edit');
 27             return this;
 28         },
 29 
 30         toggleFinished: function() {
 31             this.model.toggle();
 32         },
 33 
 34         edit: function() {
 35             var edit_view = new app.PlantModalView();
 36             edit_view.render();
 37 
 38             var $modalEl = $('#modal');
 39             $modalEl.html(edit_view.$el);
 40             $modalEl.modal();
 41         },
 42 
 43         close: function() {
 44             var value = this.input.val();
 45             if (!value) this.clear();
 46             this.model.save({name: value});
 47             this.$el.removeClass("editing");
 48         },
 49 
 50         updateOnEnter: function(e) {
 51             if(e.keyCode == 13) this.close();
 52         },
 53 
 54         clear: function() {
 55             this.model.destroy();
 56         }
 57     }); 
 58         
 59         
 60 });