Emberjs：ハッシュの関数プロトタイプ

StackOverflow https://stackoverflow.com/questions/19842522

質問

4つの垂直パネルUIがあります。

  • 最初のパネルにはメニューが表示され、表示するデータを選択できます
  • 2番目のパネルでは、事前に定義されたフィルターのリストからフィルターを選択できます
  • 3番目のパネルでは、フィルターの結果リストを表示できます
  • 第4パネルでは、特定のアイテムの詳細を表示できます

このUIには、ネストされたルートとアウトレットを使用します。

App.Router.map(function() {
    this.resource('customers', { 'path' : '/customers' }, function() {
        this.resource('customers_filters', { 'path' : '/:filter' }, function() {
            this.resource('customer', { 'path' : '/show/:customer_id' });
        });
    });
});

すべてが正常に機能しますが、特定のアイテム（ネストされたルートの最後のルート）の詳細を表示すると、URLのハッシュは正しくありません。

  • 最初のルートOK：＃/顧客
  • 2番目のルートOK：＃/顧客/すべて
  • 3番目のルートko：＃/customers/function filter（）{[ネイティブコード]}/show/2

jsbinに例を挙げました： http://jsbin.com/inagavo/1

私は何が間違っているのですか？ありがとうございました

役に立ちましたか？

解決

問題は、各ルートのモデルに基づいてEmberがURLを構築することです。アクティブ/すべてのルートの下にルートを構築しようとすると、アイテムの配列（フィルターと呼ばれるフィールドがありません）を使用しているため、現在すべて/フィルターがあるかどうかを判断する方法がわかりません。モデル。良い習慣は、スラッグ（パス内の値）にモデルのプロパティと一致させることです。

一致しない場合は、ルート内のシリアル化メソッドをオーバーライドできるため、EmberはURLのモデルをシリアル化する方法を知っています。

App.CustomersFiltersRoute = Ember.Route.extend({
  model: function(params) {

    if(params.filter == "active") {
      return _.where(App.Customers, {isActive: true});
    }

    return App.Customers;
  },

  serialize: function(model){
    if(model === App.Customers){
      return {filter:'all'}; 
    }
    return {filter:'active'};
  }
});

http://jsbin.com/inagavo/6/edit

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top