15

インターフェイスを動的に生成し、作成された要素にデータを動的にデータバインドしたいラピッドプロトタイピングツールに取り組んでいます。ViewModel は次のようになります。

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

vmSchema を使用して、タイプに基づいてインターフェイス要素を作成し、vmData をそれらの要素にデータバインドします。

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

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

4

1 に答える 1

32

モデルのフィールドと型は実行時までわからないようです。この種の動的に生成されたモデルでは、双方向バインディングが必要であると仮定して、そのプロパティをオブザーバブルに変換するコードを記述する必要があります。最も基本的な方法として、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 要素に属性を追加できる場合は、すべてが簡単なはずko.applyBindingsです。インターフェースが作成されて DOM にアタッチされたらすぐに実行するだけです。何らかの理由で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>です。

于 2012-11-17T00:20:54.527 に答える