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

Question

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

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

我的所有视图都扩展了一个基本视图,它将一个单击处理程序附加到锚点并捕获这些属性的值:

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全局对象本身可以用作全局消息传递的中介.由于应用程序中的视图对象可能不知道路由器(使用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
  }
});

什么是hapenning？

1. 路由器animate在Backbone.events['page-transition']实例化时在堆栈中注册自己的功能.
2. 当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使用正确的参数调用该函数.

结论

这种模式可以用来到处在您的应用骨干,这些事件可以由任何骨干扩展对象被聆听,可以说,它是一个Collection,Model,View,Router...你甚至可以创建这一个班轮特殊的调解:

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

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