淘汰赛如何将对象绑定到复选框和收音机答案

【问题标题】：Knockout How to bind an object into checkbox and radio淘汰赛如何将对象绑定到复选框和收音机
【发布时间】：2013-02-19 08:18:22
【问题描述】：

请参阅here。

如何将一个对象（没有 observable）绑定到一个复选框和单选值中，这样我得到的值（Value and Values）就是一个普通的对象（没有 observable）。

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)

【问题讨论】：

标签： knockout.js

【解决方案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/

【讨论】：