如何查找在集合上觸發了哪個事件

Question

我有一個名為批准的集合，我有一個關於同步和刪除事件類型的集合到 renderRows 的事件。 檢查下面的代碼我需要根據批准集合刪除事件重置當前集合。

this.approvals.on("sync delete", this.renderRows, this); 

function renderRows(model, e, event ) {
     //some code
     if (event.type == "delete") {
          this.collection.reset();
     }  
} 

但我得到的事件是undefined 。 你能告訴我如何獲取集合的 event.type

Answer 1

你也有這個選項：

this.listenTo(this.approvals, 'sync', _.partial(this.renderData, 'sync'));
this.listenTo(this.approvals, 'delete', _.partial(this.renderData, 'delete'));

和renderData （或者你想怎么稱呼它）得到一個額外的參數，你用_.partial （咖喱）

renderData: function(eventName, collection, resp, options) {}

這是方法簽名： http : //backbonejs.org/docs/backbone.html#section-133 collection.trigger('sync', collection, resp, options); 刪除看起來一樣

看起來像這樣一個基本示例：（不能delete但我可以觸發change ，只需等待 5 秒）

var Model1 = Backbone.Model.extend({
    url: 'http://jsonplaceholder.typicode.com/posts/1'
});

var View1 = Backbone.View.extend({
    template: _.template('<%= eventName %> - <%= body %>'),
    initialize: function() {
        // render something as soon as possible
        this.render();

        this.model = new Model1();
        this.listenTo(this.model, 'sync', _.partial(this.renderData, 'sync'));
        this.listenTo(this.model, 'change', _.partial(this.renderData, 'change'));
        this.model.fetch();

        // to test it
        setTimeout(_.bind(function(){this.model.set('body', 'it was changed')}, this), 5000);
    },
    // this is the normal sync/change function signature only with one extra param `eventName`
    // which is being `curry`'ed in
    renderData: function(eventName, model, resp, options) {
        this.$el.html(this.template({
            'eventName': eventName, 
            'body': model.get('body')
        }));
        return this;
    },  
    render: function() {
        this.$el.html('nothing to see here');
        return this;
    }
});

new View1({el: $('body').append($('<div>'))});

在這里運行： http : //jsfiddle.net/tLaLykk8/

Answer 2

事件名稱不會被傳遞，除非它被明確作為參數傳遞，例如trigger('sync', 'sync') 。 因此，您可以檢查參數（因為我認為在這種情況下它們會因事件而異）-但這是一個壞主意，因為它們可能會更改並且會使您的代碼變得脆弱。 最好的辦法是簡單地將其拆分：

this.listenTo(this.approvals, "sync", this.onApprovalSync);
this.listenTo(this.approvals, "delete", this.onApprovalDelete);

onApprovalSync: function() {
  this.renderRows();
}

onApprovalDelete: function() {
  this.collection.reset();
  this.renderRows();
}

Answer 3

據我了解，您希望有一個用於sync和remove事件的通用處理程序，並希望確定哪個事件觸發了該處理程序。

由於這些事件的回調簽名不同：

remove: (model, collection, options)和sync: (model_or_collection, resp, options) remove: (model, collection, options) sync: (model_or_collection, resp, options)

我們可以通過檢查傳遞給處理程序的參數類型來實現這一點，如下所示：

 var View = Backbone.View.extend({ initialize: function() { this.listenTo(this.collection, 'sync', this.dosomething); this.listenTo(this.collection, 'remove', this.dosomething); this.render(); }, events: { 'click #remove': 'triggerRemove', 'click #sync': 'triggerSync', }, render: function() { this.$el.html('<button id="remove">Trigger remove</button><button id="sync">trigger sync</button>').appendTo('body'); return this; }, triggerRemove: function() { var model = this.collection.add({ name: 'test' }); this.collection.remove(model); }, triggerSync: function() { this.collection.trigger('sync'); }, dosomething: function(model) { if (arguments[1] instanceof Backbone.Collection) //second argument is a collection console.log('remove triggered') else console.log('sync triggered') } }); var view = new View({ collection: new Backbone.Collection([{ name: 'hi' }, { name: 'hellow' }]) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>