骨干 - 获取从在模板遍历集合的某型号

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/