1

イベントを持つOpenOrderListViewのインスタンスを作成する親ビューがあります。私が得ようとしている結果は、ボタンがクリックされたときに関数が呼び出され、モデルにその属性を設定するように指示することです。OpenOrderViewsmarkCompletedOpenOrderView

機能は動作していますが、クリック イベントが処理されたビューだけでなく、親 (OpenOrderListView) 内のすべての OpenOrderViews で呼び出されています。操作されたビューでのみこのイベントをトリガーするにはどうすればよいですか?

コードは以下です

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();
    }

});

})

オーダービュー テンプレート

<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>

4

1 に答える 1

6

すべて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開閉を削除する必要があります。

于 2012-06-27T15:34:55.350 に答える