Knockout 如何将对象绑定到复选框和单选框 [英] Knockout How to bind an object into checkbox and radio

问题描述

请参阅此处.

如何将对象(无 observable)绑定到复选框和单选值中，以便我得到的值(值和值)是一个普通对象(无 observable).

How to bind an object (without observable) into a checkbox and radio value so that the value(Value and Values) I get is a normal object (without 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:

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:

See this answer (https://stackoverflow.com/a/14863924/1287183) for a custom binding that provides what you want for checkboxes. Here's a simpler version that assumes that the value is $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 会变成这样:

Your HTML would become this:

<input type="checkbox" data-bind="checkedInArray: $root.Values" />

这是一个与单选按钮类似的绑定:

Here's a binding that works similarly for radio buttons:

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 如何将对象绑定到复选框和单选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！