Knockout如何将对象绑定到复选框和收音机

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一个简单的版本：即工作方式类似于单选按钮

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

这里有一个结合：

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将成为这个

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/