如何使用自定义事件将数据从一个视图传递到另一个视图？

Question

说我有一个视图，显示一个提交按钮的搜索框。 当我点击提交按钮时，如何将搜索框的值传递给另一个视图？

我想：
鉴于1，内提交回调：this.trigger('abc', $('#searchBox').val())
鉴于2，在初始化函数：this.bind('abc', function(data){ console.log(data); })

，但似乎并没有工作：自定义事件被触发，但查看2没有看到它。

Answer 1

可惜你不能这样绑定 - 你将需要共享一个参考视图2到VIEW1：

var View2 = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this, 'foo'); 
     this.view1.bind('abc', this.foo);   
    }, 
    foo: function(data) { 
     console.log(data); 
    } 
}); 

这也意味着，在某些时候，你需要在你的View2实例设置view1所以你可以绑定它。

如果你不想通过周围的参考，只需将两种观点结合在一起的任何容器你拿着他们（即另一个视图或控制器）：

var view1 = new View1(); 
var view2 = new View2(); 

view1.bind('abc', view2.foo); 

Answer 2

我建议使用PubSub框架除了骨干。 MinPubSub是一个流行的选择。我使用从https://github.com/phiggins42/bloody-jquery-plugins中提取的jquery pubsub扩展。

然后，查看2不需要引用查看1.修改安德鲁野兔的例子，你会怎么做：

var View2 = Backbone.View.extend({ 
     initialize: function() { 
      _.bindAll(this, 'foo'); 
      $.subscribe('abc', this.foo);   
     }, 
     foo: function(data) { 
      console.log(data); 
     } 
    }); 

然后在视图1：

$.publish('abc', $('#searchBox').val()); 

当然，有了pubsub系统，你可能会想要使用比“abc”更好的东西，也许选择“searchBox：submit”作为主题。

Answer 3

这里是由德里克Bailley一个伟大的文章@ LosTechies.com： References, Routing, And The Event Aggregator: Coordinating Views In Backbone.js

本文讨论了使用内置在Backbone.js的PubSub的一个简单的解决方案。我同意德里克在提到视图应该分离的时候。