Question

我有一个名为approvals的集合，我在其上有一个同步事件，并将事件类型的集合删除到renderRows。检查下面的代码我需要根据批准集合删除事件重置当前集合。

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

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

但是我以[{1}}的身份收到了这个活动。你能告诉我如何获得集合的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

事件名称不会传递，除非它作为arg特别传递，例如一个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)

我们可以通过检查传递给处理程序的参数类型来实现这一点，如下所示：

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>

如何查找在集合上触发的事件

3 个答案: