次のビューモデルにバインディングを適用しました
var groupDeleteViewModel = {
group: { Id: ko.observable(), Name: ko.observable(), Members: ko.observableArray() },
load: function (item) {
debugger
},
remove: function (item) {
groupDeleteViewModel.group.Id(item.Id());
groupDeleteViewModel.group.Name(item.Name());
groupDeleteViewModel.group.Members(item.Members());
$("#groupDelete").show();
},
cancel: function () {
$("#groupDelete").hide();
}
}
remove 関数は、 itemで remove 関数に渡されたデータをビューにロードします。
<div id="groupDelete" class="pop-window filter-view">
<h2>
Delete Group
</h2>
<table>
<tr>
<th>
Name
</th>
<td>
<span data-bind="text:group.Name" />
</td>
</tr>
<!--ko foreach: group.Members-->
<tr>
<th>
</th>
<td>
<div data-bind="text:Name" class="grey-border">
</div>
</td>
<td>
</td>
</tr>
<!--/ko-->
</table>
<span class="centeralign">
<input type="button" value="Delete" data-bind="click: remove" class="delete" />
<input type="button" value="Cancel" data-bind="click: cancel" />
</span>
</div>
itemの各要素をgroupDeleteViewmodel.groupの各要素にマッピングし続けたくありません。コードの他の多くの場所でもそれを行ったため、コードが本当に面倒になりました。ko.mapping プラグインを使用して同じことをしたいと考えています。
今まで私が試したことは -
remove:function (item){
var data = ko.mapping.toJS(item);
ko.mapping.fromJS(data, groupDeleteViewModel.group);
$("#groupDelete").show();
}
しかし、これだけではうまくいきません。理由は本当にわかりません。それは理想的に機能するはずでした。そのような場合に ko.mapping を使用する正しい方法を誰かが教えてもらえますか?
ありがとう。