mobile - 使用 RequireJS 和 Backbone.js 进行页面转换

Question

我正在使用 RequireJS 和 Backbone.js 开发一个移动应用程序。我想通过添加 data-transition 来指定从一页到另一页的转换。和 data-direction每个 anchor 的属性(与 jQuery Mobile 相同):

<a href="#home" data-transition="slide" data-direction="left">Go to the home page</a>

我所有的 View 都扩展了一个基本 View ，该 View 将点击处理程序附加到 anchor 并捕获这些属性的值:

define([
    'zepto',
    'lodash',
    'backbone'
], function ($, _, Backbone) {
    'use strict';

    BaseView = Backbone.View.extend({
        events: {
            'click a': 'navigate'
        },
        navigate: function (e) {
            e.preventDefault();

            var href = $(e.currentTarget).attr('href'),
                transition = $(e.currentTarget).attr('data-transition'),
                direction = $(e.currentTarget).attr('data-direction');

            Backbone.history.navigate(href, true);
        }
    });
});

我的问题是我不知道如何将这些值传递给我的路由器的路由处理程序，定义为另一个模块:

define([
    'zepto',
    'lodash',
    'backbone'
], function ($, _, Backbone) {
    'use strict';

    var Router = Backbone.Thumb.Router.extend({
        routes: {
            '': 'home'
        }
    });

    var initialize = function () {
        var router = new Router();

        router.on('route:home', function () {
            require(['views/home'], function (HomeView) {
                var homeView = new HomeView();

                // Get the data-transition and data-direction attributes
                // ​​of the clicked anchor here:

                // var transition = ???,
                //     direction = ???;

                router.animate(homeView.render().$el, transition, direction);
            });
        });

        Backbone.history.start();
    };

    return {
        initialize: initialize
    };
});

有谁知道解决这个问题的好方法？

非常感谢您! :-) 最好的祝福，

大卫

Answer 1

事件

您可能知道，Backbone.js 是一个事件驱动的框架。它定义的每个对象都继承自 Backbone.Events对象并且可以发送和接收事件消息。这意味着路由器本身可以监听事件。

使用全局消息

从版本 0.9.2 开始，Backbone全局对象本身可以用作 mediator用于全局通讯。由于应用程序中的 View 对象可能不知道路由器(在使用 requireJS 模块时尤其如此)，因此可以使用 Mediator 启用这些对象之间的通信。

监听全局事件的路由器示例:

var router = Backbone.Router.extend({
  initialize: function() {
    this.listenTo( Backbone, 'page-transition', this.animate );
  },
  animate: function( href, transition, direction ) {
    // Do something interesting with this
  }
});

这里发生了什么？

路由器注册自己的animate Backbone.events['page-transition'] 中的函数实例化时堆栈。

当Backbone对象触发 page-transition事件，它将调用 router.animate使用事件触发器提供的参数的函数。

我在哪里触发事件？

来自 任何地方在应用程序中。

如何触发事件？

这是基于您问题中的代码的示例:

BaseView = Backbone.View.extend({
  events: {
    'click a': 'transition'
  },
  transition: function (e) {
    e.preventDefault();
    var href = $(e.currentTarget).attr('href'),
        transition = $(e.currentTarget).attr('data-transition'),
        direction = $(e.currentTarget).attr('data-direction');

    Backbone.trigger('page-transition', href, transition, direction );
  }
});

由于您的路由器已经注册到 page-transition来自 Backbone 的事件对象，它将调用 router.animate具有正确参数的函数。

结论

这个模式可以用 无处不在在您的 Backbone 应用程序中，这些事件可以被任何 Backbone 扩展对象监听，可能是 Collection , Model , View , Router ...您甚至可以使用这个衬垫创建一个特殊的调解器:

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

这种模式非常强大，因为它促进了模块之间的完全解耦。您的模块不必知道谁在处理该功能，他们只需要知道这不是他们的责任，并通过触发事件来警告应用程序。