Jak wyrenderować tablicę jako listę przycisków opcji?

Question

Chciałbym pętli przez tablicę, które zdefiniowałem w moim JavaScript i wyświetlić listę przycisków opcji. Mój kod, który nie działa obecnie, i to w sposób następujący (także na 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()); 

Jeśli moja tablica jest częścią html to działa dobrze, to zobaczyć (lub 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()); 

dostałem to do pracy poprzez generowanie wszystkich html w moim JavaScript i mieć to działa za pomocą pól wyboru, ale jestem zakłopotany generowania grupę radiobuttons pomocą iterato foreach r.

Czy ktoś dostał przykład jak mój pierwszy do pracy?

Answer 1

Kod daje ten błąd:

Message: ReferenceError: selected is not defined;

Bindings value: checked: selected

Zdefiniowano selected na poziomie widoku modelu, ale odwołują się wewnątrz foreach tak Knockout.js szuka go na poziomie opcji.

Zmiana:

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

do:

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

$root.selected będzie szukać nieruchomości selected na poziomie widoku modelu.

HERE to zmodyfikowany kod.

Aby uzyskać więcej informacji o pseudo-zmiennych (np. $root), zobacz 3. Access to parent binding contexts.

Answer 2

Oto jeden sposób, aby to zrobić. Zauważ, że powiązanie attr powinno nastąpić przed wiązaniem .

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

kod jest roboty. Wystarczy to knockout.js w swojej jsfiddle i ustawić dokument "onDomready": http://screencast.com/t/DmTSgCoEUsxC

Answer 4

aby móc mieć cały obiekt to lepiej użyć checkedValue zamiast attr: {wartość} tak:

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>