backbone note04

page-index.js

  // View to add new food interface 追加
  var NewView = Backbone.View.extend({
    el: $('#newfood'),
    initialize: function() {
      this.render();
    },
    events:{
      'click button#newfood-button': 'addFood'
    },
    render: function() {
      var tmp = $('<input id="newfood-name" placeholder="Input food Name.">')
        .after($('<input id="newfood-calory" placeholder="Input Calory.">'))
        .after($('<button id="newfood-button">create</button>'));
      $(this.el).html(tmp);
    },
    addFood: function() {
      fc.create({name:$(this.el).find('input#newfood-name').val(), calory:$(this.el).find('input#newfood-calory').val()});
      this.render();
    }
  });
  
  // app controller
  var AppView = Backbone.View.extend({
    
    ・・・
    
    initialize: function() {
      this.views.foodlist = new FoodListView;
      
      this.views.new = new NewView; // ここを追加
      
      fc.on('add', this.views.foodlist.add, this.views.foodlist);
      fc.on('reset', this.views.foodlist.addAll, this.views.foodlist);
      fc.fetch({reset:true});
    }
  });