敲除检查值

Question

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

基本上，看这个 fiddle http://jsfiddle.net/jo9dfykt/1/。为什么我点击按钮 "Add Item" 会选择正确的选项，但如果我点击第二个按钮 "Add Item Two" 却没有成功？ 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

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

But I want to set the inital value of radio button without search it on 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);
});

敲除检查值

Knockout checkedValue

javascript

html

knockout.js

checked