Backbone.js的 - 如何在视图之间进行沟通?(backbone.js - how to c

2019-07-30 13:18发布

我有多个Backbone.js的意见单个页面的Web应用程序。 观点有时必须彼此通信。 举两个例子:

  1. 当有两种方式提交的意见中同时不同的方式收集和在一个视图中的项目的点击必须传达给其他视图。
  2. 当用户转换到过程的下一阶段,第一视图将数据传递到秒。

为了尽可能多的去耦的意见尽可能我目前使用自定义事件来传递数据( $(document).trigger('customEvent', data) )。 有一个更好的方法吗?

Answer 1:

一种广泛使用的技术是扩展Backbone.Events -object打造您的个人全局事件聚合。

var vent = {}; // or App.vent depending how you want to do this
_.extend(vent, Backbone.Events);

根据如果你使用requirejs或别的东西,你可能要将此分成自己的模块,或者使你的应用对象的属性。 现在,您可以触发,听你的应用的任何事件。

// View1
vent.trigger('some_event', data1, data2, data3, ...);

// View2
vent.on('some_event', this.reaction_to_some_event);

这也可以让你使用事件聚合模式,集合,路由器等之间的通信这里是Martin Fowler的的事件聚合的概念 (不是在JavaScript中)。 这里是一个更backboney的实施与思考更多Backbone.Marionette的静脉的主题,但大部分是适用于香草骨干。

希望这有助于!



Answer 2:

我同意在第一部分@jakee

var vent = {}; 
_.extend(vent, Backbone.Events);

然而,“上”聆听与全球事件可能会导致内存泄漏和僵尸的观点问题,而且还导致多个动作处理程序调用等。

而不是“上”,你应该在你的视图中使用“listenTo”

 this.listenTo(vent, "someEvent", yourHandlerFunction);

因此,当您通过删除您的视图view.remove()该处理器也将被删除,因为处理程序绑定到您的看法。

当您触发全球性的活动,只需使用

vent.trigger("someEvent",parameters);


Answer 3:

jakee的回答表明,我自己已经使用了精细的方法,但还有另一种有趣的方式,那就是只要你想注入到一个对象的引用到每个视图实例,用含有尽可能多的观点引用反过来被注入的对象骨料。

在本质上的观点汇聚器是一种“应用程序”对象,并享有身边的事情可以连接,如集合。 它不包括延长期(县)等可能不是每个人的口味,但在另一方面,延长充当这样一个简单的例子。

我使用的代码在http://arturadib.com/hello-backbonejs/docs/1.html作为我的ListView的基础上,然后我得到了以下工作:

define(
    ['./listView'],

    function (ListView) {
        var APP = {
            VIEWS : {}
        }

        ListView.instantiator = ListView.extend({
            initialize : function() {
                this.app = APP;
                ListView.prototype.initialize.apply(this, arguments);
            }
        });

        APP.VIEWS.ListView = new ListView.instantiator();
        console.log(APP.VIEWS.ListView.app);
    }
);


文章来源: backbone.js - how to communicate between views?