如何將數組呈現爲單選按鈕列表？

Question

我想通過我在Javascript中定義的數組進行循環，並呈現單選按鈕列表。我的代碼當前沒有工作，這是如下（也jsfiddle）：

<div data-bind="foreach: options" > 
    <div> 
     <input type="radio" name="optionsGroup" data-bind="checked: selected" /> 
     <span data-bind="text: label"></span> 
    </div>  
</div> 

var optionsList = [ 
    {"value": "a","label": "apple"}, 
    {"value": "b","label": "banana"}, 
    {"value": "c","label": "carrot"} 
]; 
function viewModel() { 
    var self = this; 
    self.options = optionsList; 
    self.selected = ko.observable("a"); 
    self.selected.subscribe(function(newValue) { 
     alert("new value is " + newValue); 
    }); 
} 
ko.applyBindings(new viewModel()); 

如果我的數組是HTML的一部分，那麼它工作正常，請參閱本（或jsfiddle）：

<div> 
    <input type="radio" name="optionsGroup" value="a" data-bind="checked: selected"  />Apple 
</div> 
<div> 
    <input type="radio" name="optionsGroup" value="b" data-bind="checked: selected" />Banana 
</div> 
<div> 
    <input type="radio" name="optionsGroup" value="c" data-bind="checked: selected" />Carrot 
</div> 
<div data-bind="text: selected"> 
</div> 

function viewModel() { 
    var self = this; 
    self.selected = ko.observable("a"); 
    self.selected.subscribe(function(newValue) { 
     alert("new value is " + newValue); 
    }); 
}  
ko.applyBindings(new viewModel()); 

我得到這個通過生成我的javascript中的所有HTML的工作，有這方面的工作使用複選框，但使用foreach iterato難倒生成一組單選按鈕的河

有沒有人得到像我第一個工作的例子？

Answer 1

你的代碼是給這個錯誤：

Message: ReferenceError: selected is not defined;

Bindings value: checked: selected

您的視圖模型級別定義selected，但你引用它裏面foreach所以Knockout.js正在尋找它的選項水平。

變化：

<div><input type="radio" name="optionsGroup" data-bind="checked: selected" /> 

到：

<div><input type="radio" name="optionsGroup" data-bind="checked: $root.selected" /> 

$root.selected將尋找在視圖模型水平selected財產。

HERE是修改後的代碼。

有關僞變量的更多信息（如$root），請參閱3. Access to parent binding contexts。

Answer 2

這裏有一種方法來做到這一點。請注意0​​綁定應該在checked綁定之前。

var optionsList = [ 
 
    {"value": "a", "label": "apple"}, 
 
    {"value": "b", "label": "banana"}, 
 
    {"value": "c", "label": "carrot"} 
 
]; 
 

 
function viewModel() { 
 
    this.options = optionsList; 
 
    this.selected = ko.observable("a"); 
 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<h3>Fruits</h3> 
 
<div data-bind="foreach: options" > 
 
    <label> 
 
    <input type="radio" 
 
      name="optionsGroup" 
 
      data-bind="attr: {value: value}, checked: $root.selected" /> 
 
    <span data-bind="text: label"></span> 
 
    </label>  
 
</div> 
 

 
<h3>Selected value:</h3> 
 
<pre data-bind="text: ko.toJSON($root.selected)"></pre>

Answer 3

你的代碼是作品。只需在您的jsfiddle knockout.js並設置文件「onDomready」：http://screencast.com/t/DmTSgCoEUsxC

Answer 4

爲了能夠擁有整個對象是更好地使用，而不是ATTR的CheckedValue：{}值這樣的：

Fruits 
<div data-bind="foreach: options" > 
    <div><input type="radio" name="optionsGroup" data-bind="checkedValue: $data, checked: $root.selected" /> 
    <span data-bind="text: label"></span></div>  
</div>