backbone.js - 连接主干视图的正确方法

Question

我有两种看法：
   1 LeftView（当 RightView 最小化时最大化，反之亦然）
   2 RightView（含）
      - 收集
         - RightItemView（渲染 RightItemModel）

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

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

Answer 1

我建议使用 Backbone.Events 模块：

http://backbonejs.org/#Events

基本上，这一行就是创建事件调度程序所需的全部内容：

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

然后，您的所有视图都可以使用全局调度程序触发/侦听事件。

因此，在 RightItemView 中，您将在 click 事件中执行以下操作：

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

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

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

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

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

Answer 2

@jordanj77 提到的解决方案绝对是满足您要求的正确方法之一。只是出于好奇，我想到了另一种方法来达到同样的效果。EventDispatcher我们为什么不使用底层模型作为我们的，而不是使用单独的来在两个视图之间进行通信EventDispatcher？让我们试着从这些方面思考。

首先，向名为的模型添加一个新boolean属性并将其默认为. 每当用户选择 时，将模型的属性设置为 true。这将触发模型上的事件。RightItemcurrentfalseRightItemViewcurrentchange:current

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

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

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

另一方面，LeftView将RightItem在创建期间收到一个 Backbone.Collection 模型。你无论如何都会有这个实例来提供RightView不是吗？在其初始化方法中，LeftView将监听change:current事件。当事件发生时，LeftView会将current当前显示的模型的属性更改为 false 并开始显示触发此事件的新模型。

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 
});

这样，我们就可以使用底层模型作为左右视图之间的通信方式，而不是EventDispatcher为我们使用代理。

Answer 3

@Ganeshji 给出的解决方案启发了我做一个活生生的例子

我为此创建了 2 个视图。

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();

希望这可以帮助。