javascript - 在 Ember 中以编程方式创建新路线

Question

我正在使用从服务器中提取的 json 文件来配置我的网站，并告诉每个页面它的标题是什么。 json 文件如下所示:

[{"route": "student", "title": "Student Info Page"}, {"route": "payments", "title": "Payments and Pricing"}, {"route": "policy", "title": "Mine"}, {"route": "biography", "title": "About Me"}]

用于使用以下代码创建导航栏:

App.MenuController = Ember.ArrayController.create();
$.get('config.json', function(data) {
    App.MenuController.set('content', data);
});

然后在模板中使用:

{{#each App.MenuController}}
    {{#varLink route this}}{{title}}{{/varLink}}
{{/each}}

到目前为止，所有这些都运行良好。

所以这是我的问题:我希望通过 App.Router.map 完成的路由映射以编程方式完成，使用此 json 对象来确定应该存在哪些路由。

我到底应该怎么做？我搜索了文档，然后尝试了这个:

$.get('config.json', function(data) {
    App.MenuController.set('content', data);
    for (var i = 0; i < data.length; i++) {
        App.Router.map(function(){
            var r = data[i].route;
            console.log(r);
            this.route(r);
        });
    }
});

它给出以下控制台读数:

student app.js:9
payments app.js:9
policy app.js:9
biography app.js:9
Assertion failed: The attempt to linkTo route 'student' failed. The router did not find 'student' in its possible routes: 'index' ember.js:361
Uncaught Error: There is no route named student.index ember.js:23900

Answer 1

我用它来动态创建路由:

App = Ember.Application.create();
App.MenuController = Ember.ArrayController.create();

App.deferReadiness();

simulateAjax(function(data) {
    App.MenuController.set("content", data);    
    App.Router.map(function() {
        var router = this;
        data.forEach(function(item) {
           router.route(item.route); 
        });
    });
    App.advanceReadiness();
});

simulateAjax 只是一个模拟对服务器的 ajax 调用的函数。

App.deferReadiness(); 和 App.advanceReadiness(); 延迟应用程序启动，所以你没有屏幕闪烁的效果，因为新增路线的更新。因为我们的应用程序就绪是:创建路由时，而不是文档就绪。

这是一个 demo

更新

link-to 助手支持动态路由，使用对象和路径。但目前它需要使用 ENV.HELPER_PARAM_LOOKUPS = true。

这样，我们就不需要创建自定义 linkTo 来处理动态路径，就像第一个演示 ;)

新demo