将数据从一个主干视图传递到另一个

Question

假设我有以下 Backbone 视图，它加载两个链接，一个带有锚文本“test1”，另一个带有锚文本“test2”。

我绑定了一个 click 事件，我得到了被点击的链接的 HTML 并将其存储在clickedHtml变量中。

现在，该视图由 Backbone 路由器加载。

当用户单击两个链接（test1 或 test2）中的任何一个时，路由器将加载另一个名为“main”的视图。

现在，如何将“clickedHtml”变量传递给该视图？

我应该使用 LocalStorage 吗？

我应该像 window.clickedHtml 一样全局声明它吗？

有没有更好的办法？

泰！

// file: views/test.js
            define([
                'jquery', 
                'underscore', 
                'backbone'
            ], function($, _, Backbone) {

                var Test = Backbone.View.extend({

                    el : '.test',

                    initialize : function () {

                        var that = this;

                        that.$el.html('<a href="#/main">test1</a><br /><a href="#/main">test2</a>');


                    },

                    events : {

                        'click .test a' : 'click'

                    },

                    click : function (e) {

                        var clickedHtml = $(e.target).html();

                    }

                return Test;

            });

这是我的路由器：

// file: router.js

    define([
        'jquery', 
        'underscore', 
        'backbone',
        'views/test',
        'views/main'
    ], function ($, _, Backbone, Test, Main) {

        var Router = Backbone.Router.extend({

            routes: {
                '' : 'home',
                'test' : 'test'
            }
        });

        var initialize = function () {

            var router = new Router();

            router.on('route:home', function () {

                var main = new Main();

            });

            router.on('route:test', function () {

                var test = new Test();
            });

            Backbone.history.start();
        }

        return { 

            initialize : initialize 
        }
    });

Answer 1

基本上你应该使用 Backbone.Event:(或者它是 Marionette 中的等价物)

//Declaration
var notificationService = {};
_.extend(notificationService, Backbone.Events);

//Used by listener
notificationService.on("alert", function(o) {
   alert(o);
});

//Used by publisher 
notificationService.trigger("alert", {foo:"bar"});

真正的问题是它如何从一个视图传递到另一个视图？

在我看来，你有两个选择：

1. 初始化时从一个视图到另一个视图的气泡通知服务
2. 使用返回它的 requirejs 模型包装 notificationService（创建一个可以由 requirejs 传递的“几乎全局”的notificationService）。

虽然我有点不喜欢单例，但这种单例 NotificationService 对象的情况会派上用场。

编辑：

另一种选择，快速而肮脏的选择，只需使用 jquery 触发 DOM 上的事件（特别是 body 元素）并在另一个视图中监听 body

 //on Listening view, after DOM is ready
$( "body" ).on( "alert", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});

 //on Triggering view, after DOM is ready
$( "body").trigger( "alert", [ "Custom", "Event" ] );

注意：

请注意，一旦关闭侦听视图，它必须从侦听事件中移除自己（解除绑定/关闭），因此您不会有内存泄漏