每个视图实例的主干视图事件触发器

Question

A具有父视图OpenOrderListView,该视图创建OpenOrderViews具有事件的实例.我想获得的结果是,当markCompleted一个按钮OpenOrderView被点击的函数调用来告诉模型来设置属性.

该功能正在运行,但它在父(OpenOrderListView)内的所有OpenOrderViews上调用,而不仅仅是处理click事件的视图.如何才能使此事件仅在已执行的视图上触发？

代码如下

window.OpenOrderListView = Backbone.View.extend({
    el: 'table.openOrders tbody',

    initialize: function() {
        _.bindAll(this,'render');
        this.render();
    },


    render : function() {
        var $openOrders

        var models = this.collection.open();

        for (var i = models.length - 1; i >= 0; i--) {
            console.log('model', models[i]);
            console.log("this.template", this.template);
            new OpenOrderView({'model': models[i], 'el': this.el});
        };

    }
});

window.OpenOrderView = Backbone.View.extend({
    initialize: function() {
        console.log('this', this);
        _.bindAll(this,'render',
                       'markCompleted',
                       'markInProgress');
        this.render();
    },

    events : {
        "click .markCompleted":  "markCompleted",
        "click .markInProgress": "markInProgress",
    },

    markCompleted: function(){
        console.log(this);
        this.model.markCompleted();
    },

    markInProgress: function(){
        console.log("markInProgress",this);
        this.model.markInProgress();
        console.log('markInProgress Complete');
    },

    template : 'template-openOrderView',

    render : function() {
        console.log("View Rendered");
        $(this.el).append(tmpl(this.template, this.model.toJSON()));
    }

   window.Order = Backbone.Model.extend({
    url: function(){ 
        return "/api/order/id/"+this.get("id");
    },

    isCompleted: function(){
        return this.get('status') == "completed";
    },

    isInProgress: function(){
        return this.get('status') == "inProgress";
    },

    isOpen: function(){
        return this.get('status') == "open";
    },

    markCompleted: function(){
        this.set({'status':"completed"});
        console.log('markCompleted');
        return this.save();
    },

    markInProgress: function(){
        this.set({'status':"inProgress"});
        console.log('markInProgress');
        return this.save();
    },

    markOpen: function(){
        this.set({'status':"open"});
        console.log('markOpen');
        return this.save();
    }

});

})

OrderView模板

<tr class="order">
<td class="preview hide_mobile">
    <a href="{%=o.api_url%}" title="{%=o.name%}" rel="gallery"><img src="{%=o.thumbnail_url%}"></a>
</td>
<td class="name">
    <a href="{%=o.api_url%}" title="{%=o.name%}">{%=o.name%}</a>
</td>
<td class="description"><span>{%=o.description%}</span></td>
<td class="hide_mobile date_added"><span>{%=o.date_added%}</span></td>
<td class="hide_mobile user"><span>{%=o.username%}</span></td>
<td class="status">
    <a class="btn modal-download" target="_blank" href="{%=o.url%}" title="{%=o.name%}" download="{%=o.name%}">
        <i class="icon-download"></i>
        <span>Download</span>
    </a>  
    <button class="markCancel btn btn-danger" data-type="{%=o.delete_type%}" data-url="{%=o.delete_url%}">
        <i class="icon-remove icon-white"></i>
        <span>Cancel</span>
    </button>   
    <button class="markInProgress btn btn-primary" data-type="" data-url="">
        <i class="icon-repeat icon-white"></i>
        <span>Mark In Progress</span>
    </button>    
    <button class="markCompleted btn btn-success" data-type="" data-url="">
        <i class="icon-ok icon-white"></i>
        <span>Mark Completed</span>
    </button>
</td>

Answer 1

所有人SubViews都共享相同的DOM元素table.openOrders tbody.这是在线上完成的new OpenOrderView({'model': models[i], 'el': this.el});.

所以当你声明这样的事件时:

events : {
    "click .markCompleted":  "markCompleted"
}

发生的事情是,与此匹配的所有DOM元素table.openOrders tbody .markCompleted都将与此click事件绑定.

您需要每个SubView都拥有自己的this.elDOM元素.

在你的情况下,我认为如果你的SubViews在空中创建他们自己的DOM元素是更好的,如下所示:

// code simplified an not tested
window.OpenOrderView = Backbone.View.extend({
  tagName: 'tr',
  attributes: { class: "order" },

  initialize: function(){
    // don't render() here
  },

  // ... rest of your code

  render: function(){
    this.$el.html(tmpl(this.template, this.model.toJSON()));
    return this;
  }
})

看看现在SubView没有呈现自己,也没有将其DOM元素直接附加到页面,它将是ParentView:

// code simplified an not tested
window.OpenOrderListView = Backbone.View.extend({
  render : function() {
    var $openOrders

    var models = this.collection.open();

    for (var i = models.length - 1; i >= 0; i--) {
      var openOrderView = new OpenOrderView({'model': models[i]});
      this.$el.append( openOrderView.render().el );
    };
});

我认为这是一种非常常见的模式.

PD:您必须修改模板,删除tr打开/关闭.