Wie Erzeuge ein array als Liste mit radio-buttons?
Ich würde gerne eine Schleife über ein array, das definiere ich in meinem Javascript-und rendering-Liste von radio-buttons. Mein code funktioniert nicht, derzeit, und es ist wie folgt (auch auf 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());
Wenn mein array ist Teil der html, dann funktioniert es, siehe dieser (oder 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());
Habe ich diese Arbeit durch die Generierung der gesamte html-Code in javascript und haben diese arbeiten mit Kontrollkästchen, aber bin ratlos, erzeugen einer Gruppe von radiobuttons mit Hilfe des foreach-iterator.
Hat jemand bekommen ein Beispiel, wie meine erste Arbeit?
InformationsquelleAutor der Frage user759608 | 2012-01-19
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dein code ist wodurch dieser Fehler:
Ihnen angegebenen
selected
auf das view-model-Ebene, sondern Sie verweisen es inforeach
so Knockout.js suchen Sie auf der Optionen-Ebene.Ändern:
:
$root.selected
Aussehen wird für dieselected
Eigenschaft Ansicht auf Modell-Ebene.HIER ist der geänderte code.
Weitere Informationen über die pseudo-Variablen (wie
$root
) siehe 3. Zugriff auf übergeordnete verbindliche Kontexte.InformationsquelleAutor der Antwort kubetz
In der Lage sein, das gesamte Objekt, es ist besser checkedValue anstelle von attr: {Wert} so :
InformationsquelleAutor der Antwort Dragouf
Du code funktioniert. Nur sind knockout.js in deinem jsfiddle und legen Sie das Dokument "onDomready": http://screencast.com/t/DmTSgCoEUsxC
InformationsquelleAutor der Antwort Oleg Yudovich