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全局对象本身可以用作全局消息传递的mediator。由于应用程序中的视图对象可能不知道路由器（使用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，{{ 1}}，View ...您甚至可以使用这一个衬垫创建一个特殊的调解器：

Router

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

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

1 个答案:

活动

使用全局消息

侦听全局事件的路由器示例：

这里有什么好处？

我在哪里触发事件？

如何触发事件？

结论