3

我正在尝试在骨干 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");
        }
    };
});

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

4

2 回答 2

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

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

当我测试传递参数并做一些更复杂的测试时，我会发布更多内容。

于 2012-08-13T07:50:08.680 回答
0

JS客户端动态依赖加载，我想这还是我们的梦想。

您可以使用动态脚本加载等非常棘手的技术，但即使一开始看起来很容易，它也会成为一场噩梦（迟早）。

如果您需要这样的技术，请确保它值得，您应该重新考虑一下。

关于是否将一个路由器用于整个应用程序，或者通过控制器/模块或任何我已经说过我的观点的东西将它分隔在几个路由器中。

于 2012-08-09T10:58:59.603 回答