0

我在集合的 bbone 视图上的用户交互时触发了一个自定义事件，我希望它在另一个不相关的视图上发出更改信号。为此，我使用自定义事件。

//a global event object for my pub-sub model
var vent = Backbone.extend({}, Backbone.Event);

var C1 = Backbone.Collection.extend();
var V1 = Backbone.View.extend(
  events: {
    'click .appointment': 'clickCallback'
  },

  clickCallback: function(){
    vent.trigger('appointment:selected', apptProps);
  }
);

var c1Obj = new C1([{...}, {...}]);
var v1Obj = new V1({
  collection: c1Obj
});

因此，当用户单击集合视图 v1Obj 的 .appointment 元素时，这将宣布一个约会：选定事件。

现在我想要一个不同的视图 V2 来响应这个事件。绑定到“appointment:selected”事件的最佳位置在哪里？在视图 V2（CASE 1）的 initialize() 中还是在 V2 的集合/模型的 initialize() 中（CASE 2）或其他地方？我试图澄清什么是最佳做法，如果有的话。

情况1：

var V2 = Backbone.View.extend(
  initialize: function(){
    vent.on('appointment:selected', this.apptSelected, this);
  },
  appSelected: function(apptProps){
    ...
  }
);

案例二：

var C2 = Backbone.Collection.extend(
  initialize: function(){
    vent.on('appointment:selected', this.apptSelected, this);
  },
  appSelected: function(apptProps){
    ...
  }
);

据我了解，Bbone 在用户交互方面的理念是操纵数据而不是修改标记，其想法是数据变化级联到视图。如果是这样，原始问题的答案是 CASE 2？

4

1 回答 1

1

我认为最地道的事情是：

  • 通过包含在集合中来表示“已选择”的状态
  • 当用户单击.appointment时，view1 将约会模型添加到 selectedAppointments 集合中
  • view2 绑定到正常的集合生命周期事件（添加、删除、重置）selectedAppointments并相应地重新呈现自身
  • 两个视图都在它们的选项参数中使用这个集合initialize

请注意，从 Backbone 0.9.9 开始，Backbone对象本身可以用作应用程序范围的事件总线，而不是您的vent对象。

于 2013-02-15T14:55:50.623 回答