有人可以帮我吗?
基本上我有一个带有子项目的项目列表。选中项目(复选框)时,我将有一个绑定者,可以自动检查匹配的项目并勾选复选框。
这适用于 Chrome、FF 和 IE > 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>
淘汰赛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));