Question

请参阅here。

如何将对象（没有可观察对象）绑定到复选框和无线电值，以便我得到的值（值和值）是普通对象（没有可观察对象）。

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)

Answer 1

请参阅此答案（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/

Knockout如何将对象绑定到复选框和无线电

1 个答案: