请参考这里 。
如何绑定一个对象(而没有明显)为多选和单选值,使我获得的价值(价值和值)是一个正常的对象(而没有明显)。
HTML:
Selection List
<a class="pull-right" href="#" data-bind="click: addChoice">+</a>
<table class="selection" data-bind="foreach: Choices">
<tr>
<td><input type="text" data-bind="value: Id" /></td>
<td><input type="text" data-bind="value: Text" /></td>
</tr>
</table>
Checkbox Values: <br />
<!-- ko foreach: {data: Choices() } -->
<input type="checkbox" data-bind="value: ko.toJS($data), checked: $root.Values" /><span data-bind="text: Text" ></span><br />
<!-- /ko -->
Radio Value: <br />
<!-- ko foreach: {data: Choices() } -->
<input type="radio" data-bind="value: ko.toJS($data), checked: $root.Value" /><span data-bind="text: Text" ></span><br />
<!-- /ko -->
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
使用Javascript:
function VM () {
var self = this
self.Value = ko.observable()
self.Values = ko.observableArray([])
self.Choices = ko.observableArray([])
self.Choice = function (id, text) {
this.Id = ko.observable(id)
this.Text = ko.observable(text)
}
self.addChoice = function () { self.Choices.push(new self.Choice("C" + (self.Choices().length + 1), "Text Here")) }
}
var vm = new VM()
ko.applyBindings(vm)
看到这个答案( https://stackoverflow.com/a/14863924/1287183 )的自定义绑定,提供你想要的复选框。 这里有一个是假定值是简单的版本$data
:
ko.bindingHandlers.checkedInArray = {
init: function (element, valueAccessor, all, vm, bindingContext) {
ko.utils.registerEventHandler(element, "click", function() {
var array = valueAccessor(), // don't unwrap array because we want to update the observable array itself
value = bindingContext.$data,
checked = element.checked;
ko.utils.addOrRemoveItem(array, value, checked);
});
},
update: function (element, valueAccessor, all, vm, bindingContext) {
var array = ko.utils.unwrapObservable(valueAccessor()),
value = bindingContext.$data;
element.checked = ko.utils.arrayIndexOf(array, value) >= 0;
}
};
你的HTML将成为这样的:
<input type="checkbox" data-bind="checkedInArray: $root.Values" />
这里有一个绑定的工作方式类似于单选按钮:
ko.bindingHandlers.checkMe = {
init: function (element, valueAccessor, all, vm, bindingContext) {
ko.utils.registerEventHandler(element, "click", function() {
var checkedValue = valueAccessor(),
meValue = bindingContext.$data,
checked = element.checked;
if (checked && ko.isObservable(checkedValue)) {
checkedValue(meValue);
}
});
},
update: function (element, valueAccessor, all, vm, bindingContext) {
var checkedValue = ko.utils.unwrapObservable(valueAccessor()),
meValue = bindingContext.$data;
element.checked = (checkedValue === meValue);
}
};
在这里,他们都在行动: http://jsfiddle.net/mbest/kf6U8/3/