誰かがこれで私を助けてくれますか?
基本的に、子アイテムを持つアイテムのリストがあります。項目がチェックされている場合 (チェックボックス)、一致する項目を自動的にチェックしてチェックボックスにチェックを入れる bindingHandlers があります。
これは、Chrome、FF、および IE > 9 ではすべて正常に機能しますが、IE 7 または 8 では機能しません。
私の 2 番目の質問は、子アイテム (例: 私のデータ例の行) アイテムがフォームにマップされているときに、isDirty フラグを子アイテムに設定する方法です。これは可能ですか？
申し訳ありませんが、コードをjsfiddle.netに投稿したかったのですが、動作させることができませんでした:(
また、私が達成しようとしていることを行うためのより良い方法はありますか?
よろしくお願いします。
アップデート
コードを jsfiddle http://jsfiddle.net/huzzi786/ugcJU/に置くことができました
私がやろうとしているのは、チェックボックスがチェックされているとき（チェックされているだけ）、いくつかの条件に基づいて一致するアイテムを見つけてチェック済みのマークを付けてから、IE 7で動作するフォームに子アイテムを表示することです.isDirtyを取得するのはボーナスです子アイテムに取り組んでいるフラグ。
HTML
<table>
<tr>
<td valign="top">
<table>
<thead>
<tr>
<td></td>
<td>Id</td>
<td>Name</td>
</tr>
</thead>
<tbody data-bind="foreach: users">
<tr data-bind="attr: { id: ('user-' + id()) }">
<td>
<input type="checkbox" data-bind="attr: { value: id(), id: id() }, checked: isSelected, SelectRelatedUsers: Name, event:{'change' : $parent.selectUser }" /></td>
<td class="quiet"><span data-bind="text: id"></span></td>
<td class="quiet">
<a href="#" class="tag-ts" data-bind="text: Name, click: $parent.selectUser"></a>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table data-bind="with: selectedUser, visible: selectedUser() !=null" style="border: 1px solid #ccc">
<thead>
<th>Day</th>
<th>isDirty</th>
</thead>
<tbody data-bind="foreach: Lines">
<tr>
<td>Mon</td>
<td>
<input class="input-small" type="text" data-bind="value: Mon" />
</td>
<!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
</tr>
<tr>
<td>Tue</td>
<td>
<input class="input-small" type="text" data-bind="value: Tue" />
</td>
<!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
<tr>
<td>Wed</td>
<td>
<input class="input-small" type="text" data-bind="value: Wed" />
</td>
<!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
<tr>
<td>Thu</td>
<td>
<input class="input-small" type="text" data-bind="value: Thu" />
</td>
<!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
<tr>
<td>Fri</td>
<td>
<input class="input-small" type="text" data-bind="value: Fri" />
</td>
<!-- <td data-bind="text: dirtyFlag.isDirty() ? 'Yes' : 'No'"> -->
</tr>
<tr>
<td colspan="3">
<button type="button" data-bind="click: saveData">
Save
</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
ノックアウトJS
ko.dirtyFlag = function (root, isInitiallyDirty) {
var result = function () { }
var _initialState = ko.observable(ko.toJSON(root));
var _isInitiallyDirty = ko.observable(isInitiallyDirty);
result.isDirty = ko.dependentObservable(function () {
return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
});
result.reset = function () {
_initialState(ko.toJSON(root));
_isInitiallyDirty(false);
};
return result;
};
var userMapping = {
users: {
key: function (item) {
return ko.utils.unwrapObservable(item.Id);
},
create: function (options) {
return createUser(options.data);
}
}
};
var createUser = function (user) {
var result = ko.mapping.fromJS(user);
result.dirtyFlag = ko.dirtyFlag(result);
return result;
};
ViewModel = function (serverData) {
users = ko.observableArray();
selectedUser = ko.observable();
selectedLines = ko.observable();
users(serverData.users());
ko.bindingHandlers.SelectRelatedUsers = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var u = (bindingContext.$parent.users);
// console.log(u.length)
if ($(element).is(':checked')) {
for (var i = 0; i < u().length; i++) {
if ((viewModel.group() == u()[i].group()) && (viewModel.status() == u()[i].status()) && (viewModel.accesslevel() == u()[i].accesslevel())) {
u()[i].isSelected(true);
} else {
u()[i].isSelected(false);
}
};
}
}
};
selectUser = function () {
selectedUser(this);
selectedLines(this.Lines);
console.log(selectedLines)
};
saveData = function () {
alert('Saving data...')
$.ajax({
type: "POST",
url: "/server/save",
data: ko.toJSON(selectedLines()),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('div-result').show();
}
});
};
return {
users: users,
saveData: saveData,
selectUser: selectUser
}
};
var getdata = ko.mapping.fromJSON('{"users":[{"id":1,"Name":"Ali","group":2,"status":false,"accesslevel":1,"isSelected":false,"Lines":[{"lineid":3,"Mon":1,"Tue":8,"Wed":3,"Thu":4,"Fri":5}]},{"id":2,"Name":"Patel","group":2,"status":false,"accesslevel":1,"isSelected":false,"Lines":[{"lineid":2,"Mon":4,"Tue":2,"Wed":4,"Thu":4,"Fri":5}]},{"id":3,"Name":"Peter","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":3,"Mon":1,"Tue":11,"Wed":3,"Thu":1,"Fri":5}]},{"id":4,"Name":"Martin","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":4,"Mon":11,"Tue":2,"Wed":13,"Thu":4,"Fri":5}]},{"id":5,"Name":"Terry","group":2,"status":false,"accesslevel":2,"isSelected":false,"Lines":[{"lineid":5,"Mon":1,"Tue":2,"Wed":3,"Thu":4,"Fri":5}]}]}', userMapping, {});
ko.applyBindings(ViewModel(getdata));