Question

我得到了嵌套的View结构：

LayoutView
  - SidebarView
    - ContactListView
      - ContactItemView
  - ContentView

现在想象以下情况：

用户点击ContactItem。现在，ContactItem应该调用一个事件或其他东西，在ContentView中呈现被点击的联系人的个人资料。

我不知道如何在不打破灵活性的情况下做到这一点......

Answer 1

您可能希望使用事件将它们连接在一起，而不是让ContactItemView直接调用ContentView。在创建视图时，每个父视图都可以绑定到子视图的事件。然后当点击发生时，它将在链中冒泡，直到相应的视图处理它。

这是一个显示一般想法的简单示例。我按照发生事件冒泡的顺序提出这个问题，希望有点清楚。

首先，ContactItemView获取DOM click事件并为其触发Backbone事件。

//ContactItemView.js
events : {
   "click .contactName" : "click"
},

click : function(evt){
   this.trigger("clicked", this);
}

ContactListView可以监听并重新发布它：

//ContactListView.js    
render : function(){
 var itemView = new ContactItemView();
 itemView.on("clicked", this.itemClicked, this);
},

itemClicked : function(item){
  this.trigger("clicked", item);
}

SidebarView侦听该事件，并实际知道如何处理它：

//SidebarView.js    
render: function(){
  var listView = new ContactListView();
  this.contentView = new ContentView();
  listView.on(clicked, this.contactItemClicked, this);
},

contactItemClicked : function(contactItem){
   this.contentView.showMeAContact(contactItem.model); //or whatever
}

这样，您的ContactItemView对父视图一无所知，因此它可以更灵活。缺点是它有很多样板代码。也许其他人会采取更清洁的方法，但这对我来说很有用。

Answer 2

一种方法是使用事件聚合器，使您的视图能够订阅某些事件。这样您就可以将视图相互分离。您的观点不需要彼此了解，他们只需要跟踪某些事件。有关如何执行此操作的精彩教程，请参阅Derick Bailey's关于该主题的优秀文章。

Answer 3

结帐Backbone.Courier。它是一个轻量级主干插件，专为您描述的“事件冒泡”场景而设计，使子视图可以轻松地与父母，祖父母等进行通信，而无需触发链或全局事件聚合器。

Backbone：如何调用父父视图？

3 个答案: