Knockoutjs生成されたインターフェイスへのプログラムによるデータバインディング

Question

私は、インターフェイスを動的に生成し、作成した要素にデータを動的にデータバインドしたいラピッドプロトタイピングツールに取り組んでいます。 vmSchemaがそのタイプに基づいてインターフェイス要素を作成するために使用されるだろうし、その後vmDataは、それらの要素にデータバインドう

var viewModel = { 
    vmSchema: { 
      "Id" : "int", 
      "Name" : "string", 
      "UpdatedOn" : "date" 
    }, 
    vmData: { 
      "Id": "123" 
      "Name" : "Bob", 
      "UpdatedOn" : "2012-11-16T00:00:00" 
    } 
} 

：ViewModelには、次のようになります。

インターフェイスの作成は問題ありません。問題は、vmData mdoelを生成されたインターフェイスにプログラムでデータバインドすることです。

このタイプのプログラムによるデータバインディングを可能にするツールや手法はありますか？

Answer 1

モデルのフィールドとタイプが実行時まで認識されないようです。このような動的に生成されたモデルの場合、双方向バインディングが必要であると仮定して、プロパティをオブザーバブルに変換するコードを記述する必要があります。最も基本的で、あなたはvmDataを反復処理しko.observableにそれのすべてを回すことができる：結合ビューに関しては

for (var member in viewModel.vmData) { 
    if (viewModel.vmData.hasOwnProperty(member)) { 
     viewModel.vmData[member] = ko.observable(viewModel.vmData[member]); 
    } 
} 

、それは「インタフェース要素を作成」何に依存します。作成時にdata-bind属性をHTML要素に追加することができれば、すべてが簡単です。インターフェイスが作成され、DOMにアタッチされるとただちにko.applyBindingsを実行してください。何らかの理由でdata-bindデコレーションを追加できない場合は、わずかに文書化されていないko.applyBindingsToNodeを使用して手動でバインディングを指定できます。

// manually specify a binding for an element 
var elm = document.getElementById('some_elm'); 
ko.applyBindingsToNode(elm, { value: viewModel.vmData.id}, viewModel.vmData); 

上記は<span class="some_elm" data-bind="value: vmData.id"></span>に相当します。