コードを少し変更しました。このバージョンのJSFiddleを確認してください。
var jsonFromServer = '{"ModuleId":1,"Metadatas":[{"Id":1,"MinValue":null,"MaxValue":null,"FieldName":"Teste","SelectedType":"String","SelectedOptionType":null,"IsRequired":true,"Options":[]}]}';
jsonFromServer 変数には、質問で説明したようにバインディングに必要なメソッドが含まれていないため、コードは機能しません。( -- > メタデータ )
そのため、次のように、マッピング プロセスでメタデータ オブジェクトのカスタム作成関数を定義する必要があります。
var mapping = {
'Metadatas': {
create: function(options) {
var newMetaData = new MetadataViewModel(options.parent);
newMetaData.Id(options.data.id);
newMetaData.FieldName(options.data.FieldName);
newMetaData.SelectedType(options.data.SelectedType);
newMetaData.SelectedOptionType(options.data.SelectedOptionType);
newMetaData.IsRequired(options.data.IsRequired);
newMetaData.Options(options.data.Options);
// You can get current viewModel instance via options.parent
// console.log(options.parent);
return newMetaData;
}
}
}
次に、ロード関数を次のように変更しました。
self.LoadDataFromServer = function() {
var jsonFromServer = '{"ModuleId":1,"Metadatas":[{"Id":1,"MinValue":null,"MaxValue":null,"FieldName":"Teste","SelectedType":"String","SelectedOptionType":null,"IsRequired":true,"Options":[]}]}';
ko.mapping.fromJSON(jsonFromServer, mapping, self);
}
新しい viewModel を宣言して ko.applyBindings を再度呼び出す必要はありません。更新されたマッピングを現在の viewModel に割り当てるだけで十分です。詳細については、このリンクを確認してください。オブジェクト構築部分のカスタマイズに注意してください。
最後の質問は、以前に宣言されたメソッドを保持するために、すべてのアイテムを繰り返し処理し、アイテムのプロパティを入力するなど、読み込みプロセスを煩雑にすることなく、最終的な配列にアイテムを配置する最良の方法は何ですか?
私の知る限り、オブジェクトの実装でこれを行う簡単な方法はありません。オブジェクトは単純ではありません。それらには、データと機能の両方が一緒に含まれています。したがって、それらのカスタム作成関数を定義する必要があります。ただし、これを以下のように分離できる場合は、オブジェクトの構築をカスタマイズする必要はありません。
たとえば、MetadataViewModel を 2 つの異なるオブジェクトに分けます。
--> Metadata : which contains only simple data
--> MetadataViewModel : which contains Metadata observableArray and its Metadata manipulator functions
この構造を使用すると、マッピング プロセスでカスタム作成関数を定義せずに ko.mapping.fromJSON(newMetaDataArray , {} , MetadataViewModelInstance.MetadataArray) を呼び出すことができます。