Question

我试图在骨干js

中实现这样的目标

var AppRouter = Backbone.Router.extend({
    routes: {
        // MVC like route
        ':controller': 'defaultRoute',
        // MVC like route
        ':controller/:action': 'defaultRoute',
        // MVC like route
        ':controller/:action/:id': 'defaultRoute',
        // MVC like route
        ':controller/:action/*id': 'defaultRoute'
    },
    defaultRoute: function (controller, action, id) {
        // render view here or 
        // call another specific route regarding to controller parameter
    }
});

var appRouter = new AppRouter;
Backbone.history.start();

所以当url为： something.com/#home/index defaultRoute函数将获取参数 controller =“home”和 action =“index”< / strong>即可。我现在想知道如何在文件夹“controller / home / index”中找到视图（Backbone.View）并动态实例化（和渲染）。还想知道是否更好的方法是为每个“控制器”安装Backbone.Router（我使用名称“控制器”但它实际上是“路由器”）。

有什么想法吗？

更新可能的解决方案！

我最终得到了这个

// Filename: router.js define([ 'jquery', 'underscore', 'backbone' ], function ($, _, Backbone) { var AppRouter = Backbone.Router.extend({ routes: { // MVC like route ':controller': 'defaultRoute', // MVC like route ':controller/:action': 'defaultRoute', // MVC like route ':controller/:action/:id': 'defaultRoute', // MVC like route ':controller/:action/*id': 'defaultRoute' }, defaultRoute: function (controllerName, actionName, id) { controllerName = controllerName || Config.Defaults.Controller; actionName = actionName || Config.Defaults.Action; require(["controllers/" + controllerName], function (ctl) { var code = "ctl." + actionName + "();"; eval(code); }); } }); var appRouter = new AppRouter; Backbone.history.start(); });

样本控制器就是这个

define([ 'jquery', 'underscore', 'backbone' ], function ($, _, Backbone) { return { index: function () { console.log("Action: Index"); }, about: function () { console.log("Action: About"); } }; });

适用于此示例。现在尝试解决params绑定等需要更多的测试。

Answer 1

目前我还在调查，但这是我目前正在使用的代码：

    // Filename: router.js
define([
  'jquery',
  'underscore',
  'backbone'
], function ($, _, Backbone) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            // MVC like route
            ':controller': 'defaultRoute',
            // MVC like route
            ':controller/:action': 'defaultRoute',
            // MVC like route
            ':controller/:action/:id': 'defaultRoute',
            // MVC like route
            ':controller/:action/*id': 'defaultRoute'
        },
        defaultRoute: function (controllerName, actionName, id) {
            controllerName = controllerName || Config.Defaults.Controller;
            actionName = actionName || Config.Defaults.Action;
            require(["controllers/" + controllerName], function (ctl) {
                var code = "ctl." + actionName + "();";
                eval(code);
            });
        }
    });

     var appRouter = new AppRouter;
        Backbone.history.start();
});

所以“控制器”看起来像

    // Filename: controllers/home.js
define([
      'jquery',
      'underscore',
      'backbone',
    ], function ($, _, Backbone) {
        return {
            index: function () {
                require(['views/home/index'], function (view) {
                    view.render();
                });
            },
            about: function () {
                require(['views/home/about'], function (view) {
                    view.render();
                });
            }
        };
    });

接下来是创建典型的主干views。

当我测试传递参数并进行更复杂的测试时，我会发布更多信息。

Answer 2

JS 客户端动态依赖加载，我认为这仍然是我们的梦想。

你可以使用像Dynamic Script Loading这样非常棘手的技术，但即使它在开始时看起来很容易，它也会变成一场噩梦（迟早）。

如果您需要这样的技术，请确保它值得，您应该再次考虑它。

关于是否为整个应用程序使用一个路由器，或者通过控制器/模块或我已经said my opinion about的任何路由器将其分成几个路由器。

骨干与动态视图

2 个答案: