0

ルートを指定して、EmberJS で選択ボックス (AKA ドロップダウン メニュー) の状態を取得することは可能ですか?

かなり単純な私のユーザーストーリーは次のとおりです。

ユーザーは、上部にある選択メニューを使用してアイテムのリストをフィルター処理したいと考えています。項目を選択すると、リストが自動的にフィルター処理されます。フィルターの状態は URL に保持され、ユーザーは選択を取得できます。

URL: http://example.com/#/2   -> where 2 corresponds to an item in the filter

------------------------------
| Select an item         \/  |
------------------------------

* Item 1
* Item 2
* Item 3

ここに私の選択ビューがあります：

App.CitySelectView = Ember.Select.extend({
    contentBinding: "App.cityController.cities",
    optionLabelPath: "content.name",
    optionValuePath: "content.uid",
    selectionBinding: "App.cityController.selected"
});

テンプレートはそのようになります。

{{view App.StateSelectView id="form-select-state" prompt="Select an item"}}

ルーターが必要ですが、書き方がわかりません。たとえば、私が欠けているのは、「変更」でトリガーされる必要がある選択ビューに {action} を書き込む機能です。

手伝ってくれますか？

Ps。ルーティングに関連するパイプラインにこのリンクがありますhttps://gist.github.com/2728699

4

1 に答える 1

1

これを処理する簡単な方法は、コントローラで選択された値を観察し、次に send イベントを使用して変更された値をルータに渡すことです。ルーターでは、transitionTo を呼び出して URL を変更し、フィルタリングを実行できます。

App.CityController で:

selectedChanged: function() {
    App.router.send('filterDropDown', this.get('selected'));
}.observes('selected')

App.Router では、ルーターに送信される定義済みのイベントが呼び出されます。

filterDropDown: function(router, context) {
    router.transitionTo('filter', context.uid);  //pass the uid as url param
}

ルートを定義し、enter イベントでフィルタリングを処理します。

filter: Em.Route.extend({
    router: '/:selected',
    enter: function(router, context) {
        // Handle filtering here, with selected uid as context.selected
    }
})

ケースで機能させるには、シリアライズとデシリアライズをいじる必要がある場合があります。

于 2012-12-12T15:56:14.213 に答える