backbone note05

page-index.js

  // View of Food
  var FoodView = Backbone.View.extend({
    tagName:'li',
    className:'food',
    initialize: function() {
      this.render();
      this.model.on('change', this.render, this);  // 追加
      this.model.on('destroy', this.remove, this); // 追加
    },
    // eventsを追加
    events:{
      'dblclick span.name': 'renderRename',
      'keypress input.name': 'save',
      'click button.delete': 'destroy'
    },
    render: function() {
      var tmp = $('<span class="name">')
        .text(this.model.get('name'))
        .after(':')
        .after($('<span class="calory">')
        .text(this.model.get('calory')))
        .after($('<button class="delete">delete</button>')); //ボタンを追加表示
      $(this.el).html(tmp);
      return this;
    },
    // renderRenameを追加
    renderRename: function() {
      var tmp = $('<input class="name">')
        .attr('value', this.model.get('name'))
        .after($('<span class="calory">')
        .text(this.model.get('calory')));
      $(this.el).html(tmp);
      return this;
    },
    // saveを追加
    save: function(e) {
      if (e.keyCode === 13) {
        this.model.save('name', $(this.el).find('input.name').val());
      }
    },
    // destroyを追加
    destroy: function(e) {
      this.model.destroy();
    }
  });