具有动态视图的主干

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"。 我现在想知道如何在文件夹“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");
        }
    };
});

它适用于这个示例。现在正在尝试解决参数绑定等问题。需要更多测试。

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。