2017-06-12 11 views
0

親ビューモデル(ビューポートに対応)とネストされた(グリッドとウィンドウ)ビューモデルが1つあると仮定します。グリッドのactioncolumnをクリックすると、レコードIDが取得され、ajaxリクエストのURL部分として渡され、ウィンドウのテキストフィールドにレスポンスが表示されます。応答に提示された値がデフォルト値を示していない場合extjsを使用したViewModels間のデータパラメータの受け渡し

興味深いのは、viewmodelバインディングを使用してウィンドウのテキストフィールドに応答データを渡す方法です。 Ajaxのリクエストに応じ

1)必要に応じてデフォルトを作成、モデルを通じて渡されるレスポンスデータを使用して、グリッドのviewmodelリンクを作成します:私は、次の解決策を考え出した

grid.getViewModel().linkTo('custom', { 
    reference: 'CustomModel', 
    create: data 
}); 

Ext.define('CustomModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name: 'name', defaultValue: 'default name' }, 
     { name: 'value', defaultValue: 'default value' } 
    ] 
}); 

2)式を用いてグリッド内の親のviewmodelにデータを公開するビューモデル:

formulas: { 
    publishCustom: function(get) { 
     this.set('main.custom', get('custom')); 
    } 
} 

3)親(ビューポート)からのデータと、ウィンドウテキストフィールドを移入

をビューモデル

フィドルhereがあります。

これは少しは明白ではないようだが、余分なデータコピーを作成しているようだ。このような問題に対して、よりクリーンなソリューションがありますか?

+0

をグリッドやウィンドウは全くのviewmodelを持っていないのはなぜ?グリッドとウィンドウの両方に意味があるため、リクエストは親コンテナのレベルに属しているように見えます。 –

+0

これは、2つのネストされたビューモデルの数式を一まとめにした単純な例です。 1つの親ビューモデルに数千行のコードがあると、読んだり保守したりするのが少し難しくなりました。私たちがMVCまたはMVVMパターンを使用する限り、それ自身のビューモデルでこのロジックを持つことは適切です。 – fen1ksss

+0

私が得意とするのは、ロードを行う責任がグリッドのレベルにあってはならないように見えるということです。その情報は他のコンポーネントに伝達される必要があるからです。この動作は、ウィンドウ/グリッドを制御するコンテナレベルで制御する必要があるようです。現時点であなたがやっているやり方は、式の正しい使い方ではありません。 –

答えて

0

すべての子VMが親VMのデータオブジェクトを継承するので、よりクリーンなアプローチは、トップレベルのメインViewModelにのみ共通にアクセスするオブジェクトを格納することです。

引き続き、子VM内にあるかのように、それらにバインドしたり、数式で使用したりできます。 を参照してください:

ViewModel Data and Inheritance

関連する問題