使用Backbone.js的路由器通过与require.js模块化的看法导航 [英] Using the Backbone.js router to navigate through views modularized with require.js

问题描述

我分开我的看法和路由器为独立的文件与要求。然后，我有一个实例化的路由器main.js文件，也使得我的默认视图。

我的路由器有视图（查看/：身份证'）和编辑（编辑/：身份证'）的路线。在main.js，当我实例化的路由器，我可以硬code router.navigate（查看/ 1'，真）和导航工作正常。我认为文件中，当我点击编辑链接，我想打电话给router.navigate（查看/+ ID，真实的），但我不知道我应该怎么做。

我已经成功调用Backbone.history.navigate（查看/+ ID，真实的），但我不觉得我应该依托全球骨干对象。

我试图传递（{路由器：appRouter}）。我的意见，所以我可以用this.options.router.navigate（），但是，这不是为我工作

如果你很好奇，这里是从我的应用程序一堆code的：

路由器：

 定义（['./观'，'./Edit']，功能（查看，编辑）{
    返回Backbone.Router.extend（{
        路线：{
            查看/：身份证'：'观'，
            编辑/：身份证'：'编辑'
        }，        观点：功能（ID）{
            VAR模型= this.collection.get（ID）;
            VAR视图=新的View（{模式：模式}）;
            view.render（）;
        }，        编辑：函数（ID）{
            VAR模型= this.collection.get（ID）;
            VAR编辑=新的编辑（{模式：模式}）;
            edit.render（）;
        }
    }）;
}）;
 

查看：

 定义（函数（）{
    返回Backbone.View.extend（{
        模板：Handlebars.compile（$（'＃模板）HTML（）。）        事件：{
            点击.edit'：'编辑'
        }，        渲染：功能（）{
            //创建并插入求职信视图
            $（this.el）的.html（this.template（this.model.toJSON（）））;
            $（'＃查看）HTML（this.el）;            返回此;
        }，        编辑：函数（）{
            Backbone.history.navigate（编辑/+ this.model.id，真正的）;
        }，
    }）;
}）;
 

解决方案

与pretty多的骨干问题，有很多的方式来处理这个问题。我走近它在我的当前项目的方式是把在全球自定义命名空间的一切，并用它来绕过必要的引用：

  VAR了myNameSpace = {};MyNamespace.init =功能（）{
    MyNamespace.appView =新MyAppView（）;
    MyNamespace.router =新MyRouter（）;
    //等
}
 

视图可以再参考 MyNamespace.router 是必要的。但看起来这是不行的/不与require.js鼓励，所以这里有一些其他的选择：

• 永远不要叫路由器明确 - 相反，更改全局状态对象路由器听。其实，这是我如何我当前的项目做过的事情 - 看<一个href=\"http://stackoverflow.com/questions/7624373/$p$pferred-way-of-creating-link-with-backbone-js/7624684#7624684\">this响应了解更多详情。




• 连接路由器到您的顶级视图，通常被称为 APPVIEW ，作出这样的全局访问，并使用 AppView.router。导航（）。




• 请另一个模块，提供了一个导航调用效用函数 Backbone.history.navigate（）内部。这是不是从你在做什么太大的不同，但它会使它的模块化方面略胜一筹，让你使用的全球参考所有的时间。这也允许您更改内部实现。

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.

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.

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.

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:

Router:

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

View:

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

解决方案

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
}

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:

• Don't ever call the router explicitly - instead, change a global state object that the router listens to. This is actually how I've done things in my current project - see this response for more details.

• Attach the router to your top-level view, often called AppView, make that globally accessible, and use AppView.router.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屋！