Question

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

我试过了：
在视图1中，提交回调内部：this.trigger('abc', $('#searchBox').val())
在视图2中，在initialize函数中：this.bind('abc', function(data){ console.log(data); })

但这似乎不起作用：自定义事件被触发但View 2看不到它。

Answer 1

以下是Derick Bailley @ LosTechies.com的精彩文章： References, Routing, And The Event Aggregator: Coordinating Views In Backbone.js

本文讨论使用Backbone.JS中构建的PubSub的简单解决方案。我同意德里克的观点，他提到应该将观点分开。

Answer 2

不幸的是你无法以这种方式绑定 - 你需要在view2中共享对view1的引用：

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

这也意味着您需要在view1的实例上设置View2，以便绑定它。

如果您不想传递引用，只需将两个视图绑定在您持有它们的任何容器中（即另一个视图或控制器）：

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

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

Answer 3

我建议除了骨干网之外还使用PubSub框架。 MinPubSub是一个受欢迎的选择。我使用从https://github.com/phiggins42/bloody-jquery-plugins中提取的jquery pubsub扩展名。

然后，View 2不需要对View 1的引用。要修改Andrew Hare的例子，你可以这样做：

  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”作为主题。

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

3 个答案: