淘汰checkedValue

Question

我有一个关于 Knockout 中已检查绑定的 checkedValue 的问题 (http://knockoutjs.com/documentation/checked-binding.html)

基本上，看看这个小提琴http://jsfiddle.net/jo9dfykt/1/。 为什么如果我单击“添加项目”按钮选择了正确的选择，但如果我单击第二个按钮“添加项目二”这不成功？ viewModel 中的 addItem 和 addItem2 方法有什么区别？

然后，为什么 with selectedValue 什么都不显示？

我的目标是将单选按钮列表绑定到 observableArray 并将整个对象保存到 observable 中。但我想设置单选按钮的初始值而不在 observableArray 上搜索它。

Javascript

var viewModel = {
    items: ko.observableArray([
        { itemName: 'Choice 1' },
        { itemName: 'Choice 2' }
    ]),
    chosenItem: ko.observable(),
    addItem: function() {
                this.chosenItem(this.items()[0]);
    },
    addItem2: function() {
                this.chosenItem({itemName: 'Choice 2'});
    }
};
viewModel.chosenItem.subscribe(function(newValue){
        console.log(newValue.itemName);
    }),   
ko.applyBindings(viewModel);

HTML

<!-- ko foreach: items -->
<input type="radio" data-bind="checkedValue: $data, checked: $root.chosenItem" />
<span data-bind="text: itemName"></span>
<!-- /ko -->
<input type="button" data-bind="click: addItem" value="Add Item"/>
<input type="button" data-bind="click: addItem2" value="Add Item Two"/>
<div>Selected Value: <span data-bind="text: chosenItem.itemName"></span></div>

Answer 1

在第一个示例中，您为要选择的实际项目提供引用。在第二个中，您提供了一个具有相同属性和值的对象，但它不是 列表中的实际项目，只是一个看起来像它的对象。

但我想设置单选按钮的初始值而不在 observableArray 上搜索。

也许让chosentItem 成为一个计算出的可观察对象，它依赖于一个字符串observable，其中只有你想要选择的项目的键。这样你就可以说：

self.chosenItemName('Choice2');

Answer 2

Knockout 通过执行引用检查来计算checked 状态。即：

checkedValue = $data;                   // from checkedValue: $data
checked = checkedValue === chosenItem() // from checked: $root.chosenItem

您可能会知道，在 javascript 中，看起来相似的两个对象并不相等：

{ a: 1 } === { a: 1 } // returns false

这就是为什么您需要将第二个按钮重写为：

this.chosenItem({itemName: this.items()[0]});

确保参考检查通过。

另外，要正确显示当前状态，请使用：

<div data-bind="with: chosenItem">
  Selected Value: <span data-bind="text: itemName"></span>
</div>

如果您想避免必须指向 items 数组中的元素，可以使用 checkedValue: itemName 和 addItem() { this.chosenItem("Choice 1"); }，但这会强制您使用唯一名称。

更好的选择是为您的项目制作具有自己的add 方法的视图模型：

var Item = function(name, selection) {
  var self = this;
  this.itemName = name;
  this.add = function() {
    selection(self);
  };
};

var items = ["Choice 1", "Choice 2"].map(function(name) {
  return new Item(name, vm.chosenItem);
});