骨幹 - 獲取從在模板遍歷集合的某型號

Question

比方說，我的模板看起來像這樣：

<script type="text/template" id="template"> 
    {{#each []}} 
    <div>{{this.id}}</div> 
    <div>{{this.name}}</div> 
    <div>{{this.description}}</div> 
    <input id="my-btn" type="button">Button</input> 
    {{/each}} 
</script> 

模型和集合：

var Item = Backbone.Model.extend({ 
    defaults: { 
     id: null, 
     name: '', 
     description: '' 
    } 
}); 

var ItemCollection = Backbone.Collection.extend({ 
    model: Item, 
    url: function() { 
     return '/items'; 
    } 
}); 

並在視圖我只是取物品和顯示它們：

var ItemsView = Backbone.View.extend({ 
    el: $('#items'), 
    template: Handlebars.compile($('#template').html()), 
    items: new ItemCollection(), 
    initialize: function() { 
     var self = this; 
     this.items.fetch({success: function() { 
      self.render(); 
     }}); 
    }, 
    render: function() { 
     var items = new ItemCollection(); 
     var html = this.template(items.toJSON()); 
     this.$el.html(html); 
    } 
}); 

每個項目與它在模板中的字段有它自己的按鈕。

現在我需要添加一個功能，當按下模板中的按鈕時會觸發，所以點擊某個功能必須獲取與模板中的按鈕關聯的項目。

我該怎麼做？

Answer 1

這裏有一種方法可以完成你所要求的 - 只需在events散列（http://backbonejs.org/#View-events）中添加點擊處理程序即可。我將數據短劃線屬性添加到按鈕中，以便在點擊處理程序中可以確定單擊哪個按鈕/模型來執行操作。

var ItemView = window.Backbone.View.extend({ 
    tagName: 'div', 
    template: Handlebars.compile($('#template').html()), 
    events: { 
      'click .item-btn': 'clickHandler' 
    }, 
    render: function() { 
     this.$el.html(this.template({ 
     items: collection.toJSON() 
     })); 
     return this; // backbone convention -- return the view 
    }, 
    clickHandler: function(e) { 
      alert($(e.target).data().itemId + ' clicked'); 
    } 
    }); 

上述觀點假設下面的模板：

<script type="text/template" id="template"> 
     {{#each items}} 
     <div>{{this.id}}</div> 
     <div>{{this.name}}</div> 
     <div>{{this.description}}</div> 
     <input class="item-btn" data-item-id="{{this.id}}" type="button" value="Button {{this.id}}"></input> 
     {{/each}} 
    </script> 

這裏是一個工作演示：https://jsfiddle.net/9cgzcc3y/

另一種方式來做到這一點（和一個我喜歡個人）正在創造一個單一每個模型的視圖。這樣，每個視圖將由一個單獨的模型支持。

var ItemView = window.Backbone.View.extend({ 
    tagName: 'div', 
    template: Handlebars.compile($('#template').html()), 
    events: { 
      'click .item-btn': 'clickHandler' 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 
    clickHandler: function() { 
     alert('clicked: ' + this.model.get('id')); 
    } 
    }); 

    var ItemsView = window.Backbone.View.extend({ 
    tagName: 'div', 
    initialize: function() { 
     this.collection = collection; 
    }, 
    render: function() { 
     var frag = document.createDocumentFragment(); 
     this.collection.each(function(model) { 
      frag.appendChild(new ItemView({model: model}).render().el); 
     }); 
     this.$el.append(frag); 
     return this; 
    } 
    }); 

    $('#items').append(new ItemsView().render().$el); 

這裏是這種替代的工作演示：https://jsfiddle.net/45kuhp7h/