9

サーバーから取得したjsonファイルを使用してWebサイトを構成し、各ページにタイトルを伝えています。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
4

1 に答える 1

5

これを使用して、ルートを動的に作成しました。

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();遅らせると、新しく追加されたルートが更新されるため、画面の点滅の影響がなくなります。私たちのアプリケーションの準備は次のとおりであるため、ルートが作成されたとき、ドキュメントの準備はできていません。

そして、ここにデモがあります

アップデート

link-toヘルパーは、オブジェクトとパスを使用して動的ルーティングをサポートします。しかし、現時点では使用する必要がありますENV.HELPER_PARAM_LOOKUPS = true。

linkToこれにより、最初のデモのように、動的パスを処理するためのカスタムを作成する必要がなくなります;)

新しいデモ

于 2013-08-05T17:18:16.893 に答える