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

问题描述

请参见此处.

如何将对象(不可观察)绑定到复选框和单选值，以使我得到的值(值和值)是正常对象(不可观察).

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/

这篇关于淘汰赛如何将对象绑定到复选框和单选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！