Question

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

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

然后，为什么用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

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);
});

Answer 2

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

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

也许使observable成为一个计算的observable，它只依赖于一个字符串self.chosenItemName('Choice2');，只包含你想要选择的项的键。这可以让你说出这样的话：

{{1}}

Knockout checkedValue

2 个答案: