1

配列の配列を含むJSON構造を持っています。観測可能なデータを含むObservable Arraysを持つオブジェクトを定義し、そのオブジェクトを他のArrays and ObservablesにネストするView Modelを持っています。Knockoutjsを使用してJSONをネストしたデータバインド

観測可能なデータを含むネストされたオブザーバブルアレイを含むビューモデルをロードする最も簡単な方法は何ですか?

例: http://jsfiddle.net/uyQb6/1/

答えて

3

あなたはマッピング・プラグインを使用して探ることができますが、それぞれのコールバックが再びマッピング・プラグインを呼び出し、任意のdependentObservablesを追加し、それが容易になるだろうしなければならないの作成などのオプションオブジェクトが複雑になるだろうすべてのプロパティを観測可能にする。

コンストラクタをスティックして、ko.utils.arrayMapのようなものを使用できます。これは、配列をループし、指定した関数から返されたものに各アイテムを再マップする単純な関数です。 http://jsfiddle.net/rniemeyer/VUfSS/

+0

ええ、私はあなたのブログhttp:// wwwに[この投稿](http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html)を見つけた後、その道を始めました。 .knockmeout.net。でも、良い方法があるかどうかはわかりませんでした。ありがとう! – Homer

0

更新:

は、ここで追加ko.utils.arrayMap通話とあなたのサンプルである、あなたのネストされたリストは、メインリストに依存している場合、これはRP-ニーマイヤーのソリューションが最善であるそうでない場合は、@、あなたのソリューションです。

私は右のそれを得た場合は、このようなJSONデータを持って言うことができます:

{ 
    appId: 1, 
    appName: 'my app 1', 
    modules:[ 
     {module1:1, moduleName: 'module 1'}, {module1:2, moduleName: 'module 2'}] 
}, 
{ 
    appId: 2, 
    appName: 'my app2', 
    modules:[ 
     {module1:3, moduleName: 'module 3'}, {module1:4, moduleName: 'module 4'}] 
} 

これはあなたのViewModelになります:

function myViewModel(){ 
    var self = this; 
    self.appList = ko.observableArray(data); 
    self.moduleList = ko.observableArray([]); 

    // Set selectedApp in order to fill modulesList 
    self.selectedApp = ko.observable(); 
    self.selectedApp.subscribe(function(v){ 
     // updates module list whenever selected app gets value. 
     moduleList(v.modules); 
    }); 
} 

私はそれをテストしていないが、私はよ確かにあなたは考えを持っている。

関連する問題