以编程方式在Ember中创建新路由 [英] Programmatically create new routes in Ember

问题描述

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

I am using a json file pulled from the server to configure my website, and to tell each page what it's title is. The json file looks like this:

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

用于创建带有此代码的导航栏：

which is used to create a navigation bar with this code:

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

然后在模板中使用：

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

所有这一切都很好，迄今为止。

All of this works great so far.

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

So here's my question: I want the route mapping done with App.Router.map to be done programatically, using this json object to determine which routes should exist.

我应该怎么做？我搜索了文档，然后尝试这样做：

How on earth should I do this? I've hunted around the documentation, and then tried this:

$.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);
        });
    }
});

其中给出以下控制台显示：

which gives the following console readout:

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

推荐答案

我用这个动态创建路由：

I have used this to create the routes dynamically:

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调用服务器。

simulateAjax is just a function that simulate an ajax call to the server.

App.deferReadiness（）; 和 App.advanceReadiness （）; 延迟应用程序启动，因此由于更新了新添加的路由，所以您没有屏幕闪烁的效果。由于我们的应用程序准备就绪：当创建路由时，不能准备好文档。

App.deferReadiness(); and App.advanceReadiness(); delay the application startup, so you don't have the effect of the screen blink, because of the update of new added routes. Since our application ready is: when the routes are created, not document ready.

这里是一个演示

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

link-to helper support dynamic routing, using a object and path. But at the moment its needed to use ENV.HELPER_PARAM_LOOKUPS = true.

有了这个，我们不需要创建自定义的 linkTo 来处理动态路径，如第一个演示;）

With this, we don't need to create a custom linkTo to handle dynamic path, like the first demo ;)

新建< a href =http://jsfiddle.net/marciojunior/nV2gG/ =nofollow> demo

这篇关于以编程方式在Ember中创建新路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！