淘汰赛的CheckedValue

问题描述：

我已经得到了有关的基因敲除（http://knockoutjs.com/documentation/checked-binding.html）淘汰赛的CheckedValue

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

然后，为什么with selectedValue什么也没有显示？

我的目标是将单选按钮列表绑定到observableArray并将整个对象保存到可观察对象中。但我想设置单选按钮的初始值，而不在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>

答

淘汰赛做一个参考检查计算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"); }但这种强迫你使用独特的名字。

一个更好的选择将是使的ViewModels为您的项目有自己的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); 
});

感谢，我已经忘了参考的故事..哎呀！你用'add'方法的选择对我来说是最好的选择。 – Lic

答

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

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

或许会让chosentItem一个计算观察到的，这依赖于字符串observable你想要选择的项目只是关键。这将允许你这样说：

self.chosenItemName('Choice2');

淘汰赛的CheckedValue

相关推荐