javascript - Backbone : How can I call a parent parent view?

Question

我得到了以下嵌套 View 结构:

LayoutView
  - SidebarView
    - ContactListView
      - ContactItemView
  - ContentView

现在想象以下情况:

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

我不知道如何在不破坏灵 active 的情况下做到这一点......

Answer 1

您可能希望使用事件将它们连接在一起，而不是让 ContactItemView 直接调用 ContentView。当您创建 View 时，每个父 View 都可以绑定(bind)到 subview 的事件。然后当点击发生时，它将通过链向上冒泡，直到适当的 View 处理它。

这里有一个简单的例子来展示一般的想法。我按照事件冒泡发生的顺序进行介绍，希望这样更清楚一些。

首先，ContactItemView 获取 DOM 点击事件并为其触发 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 就不知道父 View 的任何信息，因此它可以更加灵活。缺点是它有很多样板代码。也许其他人会有更简洁的方法，但这对我有用。