Mobile 使用RequireJS和Backbone.js的页面转换

我正在使用RequireJS和Backbone.js开发一个移动应用程序。我希望通过向每个锚添加

数据转换

和

数据方向

属性来指定从一个页面到另一个页面的转换（与jQuery Mobile相同）：

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

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
    };
});

有人知道这个问题的好办法吗

非常感谢您！：-）致以最良好的祝愿

大卫

事件 您可能知道，Backbone.js是一个事件驱动的框架。它定义的每个对象都继承自

主干.Events

对象，可以发送和接收事件消息。这意味着路由器本身可以监听事件

使用全局消息 自版本0.9.2以来，

主干

全局对象本身可以用作全局消息传递的基础。由于应用程序中的视图对象可能不知道路由器（在使用requireJS模块时尤其如此），因此可以使用中介来启用这些对象之间的通信

路由器侦听全局事件的示例： 这里发生了什么？

路由器在实例化时在

主干.events['page-transition']

堆栈中注册自己的

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 );
  }
});

由于您的路由器已经从

主干

对象注册到

页面转换

事件，它将调用

路由器.animate

函数并使用适当的参数

结论 此模式可在主干网应用程序中的任何位置使用，这些事件可由任何主干网扩展对象侦听，可能是

集合

，

模型

，

视图

，

路由器

。。。您甚至可以使用以下一行代码创建一个特殊的中介：

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

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

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

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 );
  }
});

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