Backbone.js 连接主干视图的正确方法 我有两种看法： 1左视图（当右视图最小化时最大化，反之亦然） 2右视图（包含） -收藏 -RightItemView（呈现RightItemModel）

当RightView最大化并且用户单击RightItemView时，我希望最大化LeftView并根据单击的RightItemView中的数据显示一些内容

---

连接它们的正确方式是什么？

我建议使用主干。事件模块：

基本上，创建事件调度器只需这一行：

I have a two views: 1 LeftView (maximized when RightView is minimized & vice versa) 2 RightView (containing) - collection of - RightItemView (rendering RightItemModel) 然后，所有视图都可以使用全局调度程序触发/侦听事件

因此，在RightItemView中，您可以在单击事件中执行以下操作：

var dispatcher = _.clone(Backbone.Events);

然后，在LeftView的初始化函数中，您可以侦听事件并调用相关函数：

dispatcher.trigger('rightItemClick', data); // data is whatever you need the LeftView to know

假设您的LeftView具有如下功能：

dispatcher.on('rightItemClick', this.maximizeAndDisplayData);

---

提到的@jordanj77解决方案绝对是实现您需求的正确方法之一。只是出于好奇，我想到了另一种方法来达到同样的效果。与其使用单独的

EventDispatcher

在两个视图之间进行通信，为什么我们不使用底层模型作为

EventDispatcher

？让我们试着按照这些思路思考

首先，向名为

current

的

righitem

模型添加一个新的

boolean

属性，并将其默认为

false

。无论何时，用户选择

RightItemView

，将模型的

current

属性设置为true。这将触发模型上的

change:current

事件

maximizeAndDisplayData: function(data) {
    // do whatever you need to here
    // data is what you passed with the event
}

另一方面，

LeftView

将被交给主干。在创建期间，

righitem

模型的集合。无论如何，您都可以使用这个实例来提供

RightView

，不是吗？在初始化方法中，

LeftView

将侦听

change:current

事件。当事件发生时，

LeftView

将当前显示的模型的

current

属性更改为false，并开始显示触发此事件的新模型

var RightItem = Backbone.Model.extend({
  defaults: {
    current: false,
  }
});

var RightItemView = Backbone.View.extend({
  events: {
    'click li': 'changeCurrent'
  }

  changeCurrent: function() {
    this.model.set('current', true);
  }
});

---

这样，我们就可以使用底层模型作为左视图和右视图之间的通信手段，而不是使用

EventDispatcher

为我们进行代理

由@Ganeshji给出的解决方案启发了我去生活

我为此创建了两个视图

var LeftView = Backbone.View.extend({
  initialize: function() {
    this.collection.on('change:current', this.render, this);
  },

  render: function(model) {
    // Avoid events triggered when resetting model to false
    if(model.get('current') === true) {

      // Reset the currently displayed model
      if (this.model) {
        this.model.set('current') = false;
      }

      // Set the currently selected model to the view
      this.model = model;

      // Display the view for the current model
    }
  }
});

var leftView = new LeftView({
  // Use the collection that you may have given the RightView anyways
  collection: rightItemCollection 
});

var RightView=Backbone.View.extend({
el:$（'右视图'），
模板：u.template（“右视图”
”），
renderTemplate:函数（）{
此.$el.html（“”）；
this.el.append（this.template（））；
this.$link=this.$el.append（''）.children（'#left_view_max'）；
},
活动：{
“单击#左视图_最大值”：“maxLeftView”
},
maxLeftView:函数（）{
//触发leftView的事件
触发器（'displayDataInLeftView'，this.$link.attr（'title'）；
},
初始化：函数（选项）{
this.renderTemplate（）；
}
});
var LeftView=Backbone.View.extend({
el:$（'左视图'），
模板：u.template（“左视图”
”），
renderTemplate:函数（）{
此.$el.html（“”）；
this.el.append（this.template（））；
},
displayDataInLeftView:函数（数据）{
这个.$el.append（''+data+'
'）；
},
初始化：函数（选项）{
//设置触发器回调
this.on（'displayDataInLeftView'，this.displayDataInLeftView，this）；
this.renderTemplate（）；
}
});
var lView=new LeftView（）；
var rView=new RightView（）；

---

希望这能有所帮助。

谢谢jordanj77，我会支持你的方法，尽管Ganeshji&nameIsNull看起来也不错。太遗憾了，我没有名声可以分享。

var RightView = Backbone.View.extend({
  el: $('.right_view'),

  template: _.template('<p>Right View</p>'),

  renderTemplate: function () {
      this.$el.html('');
      this.$el.append(this.template());  
      this.$link = this.$el.append('<a href="#" title="some data" id="left_view_max">Item to view</a>').children('#left_view_max'); 
  },

  events: {
      'click #left_view_max'    :   'maxLeftView'
  },

  maxLeftView: function () {
    //triggering the event for the leftView
    lView.trigger('displayDataInLeftView', this.$link.attr('title'));
  },

  initialize: function (options) {  
      this.renderTemplate();
  }
});

var LeftView = Backbone.View.extend({
  el: $('.left_view'),

  template: _.template('<p>Left View</p>'),

  renderTemplate: function () {
      this.$el.html('');
      this.$el.append(this.template());
  },

  displayDataInLeftView: function (data) {
    this.$el.append('<p>' + data + '</p>');
  },

  initialize: function (options) {
    //set the trigger callback
    this.on('displayDataInLeftView', this.displayDataInLeftView, this);
    this.renderTemplate(); 
  }
});

 var lView = new LeftView();
 var rView = new RightView();