淘汰賽的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>

來源

2017-07-03 Lic

淘汰賽做一個參考檢查計算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); 
});

來源

2017-07-03 11:23:42 user3297291

感謝，我已經忘了參考的故事..哎呀！你用'add'方法的選擇對我來說是最好的選擇。 – Lic

在第一個例子你到你想要選擇的實際項目提供參考。在第二個中，您提供的對象具有相同的屬性值&，但它不是中的實際項目，而只是一個看起來像它的對象。

但我想設置單選按鈕的初始值，而無需在observableArray上搜索它。

或許會讓chosentItem一個計算觀察到的，這依賴於字符串observable你想要選擇的項目只是關鍵。這將允許你這樣說：

self.chosenItemName('Choice2');

來源

2017-07-03 11:21:06 Jamiec

淘汰賽的CheckedValue

回答

相關問題