有人可以帮帮我吗？
基本上我有一个包含子项的项目列表。检查项目时（复选框）我有一个bindingHandlers，它会自动检查匹配的项目并勾选复选框。
这适用于Chrome，FF和IE＆gt; 9但是没有使用IE 7或8.勾选复选框后，它仍然未被取消，并且绑定手柄自动勾选的那些不能被取消勾选。
我的第二个问题是如何将子项目的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>
KnockoutJS
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));
答案 0 :(得分：1)
看起来它在某种程度上与IE中触发事件的顺序有关。
您可以通过从selectUser函数返回true来解决此问题，该函数允许执行默认操作。
所以，您可能希望将其更改为：
selectUser = function () {
selectedUser(this);
selectedLines(this.Lines);
return true;
};