3

Ember.js のドキュメント全体で、動的セグメントの概念がいくつかの場所で言及されています。どういう意味ですか？

4

1 に答える 1

5

適切なサンプルによる更新:デモ| ソース

コメントでの質問による編集:

Ember では、Routerメカニズムをステート マシンと考えてください。それぞれがステートと見なすRouteことができます。場合によっては、状態が独自の小さな状態マシンを持つこともあります。そうは言っても、Aresourceは可能な子状態を持つ状態です。Aは、コールバックでaPersonRouteとして定義できます。それは本当にあなたの最終目標に依存します。たとえば、人物モデルに基づいた人物リストのリソースを考えてみると、すべてのレコードを一覧表示するルートが考えられます。resourceroute<Application>.Router.map

App.Router.map(function() {
    this.resource('people');
});

このマップでは、ユーザー テンプレート (および場合によってはビュー)、ユーザー コントローラー、およびユーザー ルートが必要であることをアプリに伝えています。また、リソースにはインデックス ルートがあると想定されます。これは暗示されているため、コーディングする必要はありませんが、必要な場合はPeopleIndexRoute、慣例により、リソース自体の名前の後に となります。

これで、(a)リソースのperson下にルートを作成してpeople、個人レコードの単一の状態にすることができます。または（b）personリソースの下にpeopleリソースを作成できるため、リソースの下にさらに多くのオプションperson（編集、詳細、削除）があります。または (c) 個人用に別のリソースを作成し、必要に応じてパスを使用して URL を上書きすることもできます。

私は時々オプションcに行きます：

App.Router.map(function() {
    this.resource('people');
    this.resource('person', {path: 'person/:person_id'}, function() {
        this.route('edit');
        this.route('delete');
    });
});

editルートには子の状態がなく、兄弟 (削除) と親 (人) のみがあるため、これは理にかなっています。レコードの URL は次のようになります: ~/#/person/3/edit)。

ルートは、リソースとして定義されていない場合、子のルート/状態を持たないため、person.index のように person.edit.index はありません。つまり、ルートには子がありません。兄弟とリソースは両方を持つことができます。

現在、Routing Guideは、これに関する最も信頼できるドキュメントです。強くお勧めします。

ダイナミック セグメントは、使用中のリソースに応じて変化するルート URL の一部です。次の点を考慮してください。

App.Router.map(function() {
    this.resource('products', function() {
        this.route('product', { path: ':product_id' })
    }
});

上記のスタブの行は次のとおりです。

this.resource('products', function() {

URLを生成します

〜/#/製品

そして次の行は生成します

~/#/products/:product_id

動的部分を置き換えると、次のような URL を持つことができます

~/#/products/3

これ:product_idが、このルートを動的にするものです。ルーターはリソース (Productモデルなど) の ID を URL にシリアライズし、その ID をfindのモデルにも使用しますDS.Store。これは、次のようなルートでよく見られます。

App.ProductRoute = Em.Route.extend({
    model: function(params) {
        return App.Product.find(params.product_id);
    }
});

この例では、 にアクセスする~/#/products/3と、アプリはストアから Product モデルのインスタンスを読み込もうとするか、バックエンド API からフェッチしようとします。

ここでそれを示すフィドルを見ることができます| ソースはこちら

また、Tom Dale によるこのスクリーンキャストもお勧めします。彼は、ルーターと ember-data API を使用して Ember.js でブログ リーダー アプリを構築し、URL の動的部分に基づいてブログ レコードを読み込みます。

于 2013-03-29T16:22:55.177 に答える