使用 Backbone.js 路由器浏览使用 require.js 模块化的视图 [英] Using the Backbone.js router to navigate through views modularized with require.js

问题描述

我使用 require 将我的视图和路由器分离到单独的文件中.然后我有一个 main.js 文件来实例化路由器，并呈现我的默认视图.

I am separating my views and router into separate files with require. I then have a main.js file that instantiates the router, and also renders my default view.

我的路由器将视图 ('View/:id') 和编辑 ('Edit/:id') 作为路由.在 main.js 中，当我实例化路由器时，我可以硬编码 router.navigate('View/1', true) 并且导航工作正常.在我的视图文件中，当我点击编辑链接时，我想调用 router.navigate('View/' + id, true)，但我不知道该怎么做.

My router has view ('View/:id') and edit ('Edit/:id') as routes. In main.js, when I instantiate the router, I can hardcode router.navigate('View/1', true) and the navigation works fine. In my view file, when I click on the edit link, I want to call router.navigate('View/' + id, true), but I'm not sure how I should do this.

我已成功调用 Backbone.history.navigate('View/' + id, true)，但我觉得我不应该依赖全局 Backbone 对象.

I've had success calling Backbone.history.navigate('View/' + id, true), but I don't feel like I should be relying on the global Backbone object.

我尝试将 ({ router: appRouter }) 传递给我的视图，以便我可以使用 this.options.router.navigate()，但是这对我不起作用.

I tried passing ({ router: appRouter }) to my views so I could use this.options.router.navigate(), however that wasn't working for me.

如果你好奇，这里是我的应用程序中的一堆代码:

In case you're curious, here's a bunch of code from my app:

路由器:

define(['./View', './Edit'], function (View, Edit) {
    return Backbone.Router.extend({
        routes: {
            'View/:id': 'view',
            'Edit/:id': 'edit'
        },

        view: function (id) {
            var model = this.collection.get(id);
            var view = new View({ model: model });
            view.render();
        },

        edit: function (id) {
            var model = this.collection.get(id);
            var edit = new Edit({ model: model });
            edit.render();
        }
    });
});

查看:

define(function () {
    return Backbone.View.extend({
        template: Handlebars.compile($('#template').html()),

        events: {
            'click .edit': 'edit'
        },

        render: function () {
            //Create and insert the cover letter view
            $(this.el).html(this.template(this.model.toJSON()));
            $('#View').html(this.el);

            return this;
        },

        edit: function () {
            Backbone.history.navigate('Edit/' + this.model.id, true); 
        },
    });
});

推荐答案

与几乎所有 Backbone 问题一样，有很多方法可以解决这个问题.我在当前项目中处理它的方法是将所有内容放在全局自定义命名空间中，并使用它来传递必要的引用:

As with pretty much any Backbone question, there are lots of ways to handle this. The way I approached it in my current project was to put everything in a global custom namespace, and use that to pass around the necessary references:

var MyNamespace = {};

MyNamespace.init = function() {
    MyNamespace.appView = new MyAppView();
    MyNamespace.router = new MyRouter();
    // etc
}

视图可以根据需要引用MyNamespace.router.但看起来这对 require.js 不起作用/不鼓励使用，所以这里有一些其他选项:

Views could then refer to MyNamespace.router as necessary. But it looks like this won't work/isn't encouraged with require.js, so here are some other options:

• 永远不要显式调用路由器 - 而是更改路由器侦听的全局状态对象.这实际上是我在当前项目中所做的事情 - 参见 此回复 了解更多详情.

将路由器附加到您的顶级视图，通常称为 AppView，使其全局可访问，并使用 AppView.router.navigate().

Attach the router to your top-level view, often called AppView, make that globally accessible, and use AppView.router.navigate().

制作另一个提供 navigate 实用函数的模块，该函数在内部调用 Backbone.history.navigate().这与您正在做的事情没有太大区别，但它会使它稍微更加模块化并阻止您一直使用全局引用.这也允许您更改内部实现.

Make another module that provides a navigate utility function that calls Backbone.history.navigate() internally. This isn't much different from what you're doing, but it would make it slightly more modular and keep you from using the global reference all the time. This also allows you to change the internal implementation.

这篇关于使用 Backbone.js 路由器浏览使用 require.js 模块化的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！