2012-04-10 24 views
1

Ich habe folgendes Beispiel: http://jsfiddle.net/jLkxG/6/checkbox nicht boolescher Wert?

Die is_checked Eigenschaft kann zwei Werte annehmen: Ja oder Nein. Das Kontrollkästchen aktiviert werden soll, wenn der Wert ja und wenn der gespeicherte Link geklickt wird, sollte die Eigenschaft zugeordnet werden ja oder nein, abhängig davon, ob das Kontrollkästchen aktiviert ist.

Wie würden Sie das in knockoutjs tun?

+2

Haben Sie einen Link auf die falsche jsfiddle? Es scheint nicht mit Ihrer Frage verbunden zu sein. –

+0

hat den Link repariert. – firebird

Antwort

2

Eine weitere Möglichkeit, neben berechneten „subscribe“ verwenden, um auf der Wertänderung zu hören in. Binden Sie zum Beispiel an das is_checked und machen Sie diesen Wert wahr oder falsch. Dann abonnieren Sie diese Observable und setzen Sie eine andere Eigenschaft nach Bedarf auf Ja/Nein. Sehen Sie sich die Geige hier: http://jsfiddle.net/johnpapa/jLkxG/8/

HTML

<input type="checkbox" data-bind="checked: checkedvals.is_checked"/> 
<label>Test</label><br/> 

<pre data-bind="text:displayJS"> 
</pre>​ 

JavaScript

var viewModel = (function() { 
    var self = this; 
    self.checkedvals = { 
     is_checked : ko.observable(true), 
     is_checked_val : ko.observable("Yes") 
    }; 
    self.checkedvals.is_checked.subscribe(function(){ 
     self.checkedvals.is_checked_val(self.checkedvals.is_checked() ? "Yes" : "No"); 
    }); 

    self.displayJS = ko.computed(function() { 
     return JSON.stringify(ko.toJS(checkedvals), null, 2); 
    }); 
})(); 
ko.applyBindings(viewModel);​ 
3

Ihr erstes Problem ist, dass man die Klammern verpasst auf Ihrer Bindung:

<input type="checkbox" value="Yes" data-bind="checked: is_checked() == 'Yes'"/> 

Jetzt wird das Kontrollkästchen korrekt auf Belastung geprüft werden.

Das größere Problem ist, dass das Anklicken des Kontrollkästchens den Wert nicht zurück schreiben wird. Wenn Sie is_checked() zu einem bool ändern, wird es funktionieren. Also, wenn Sie haben:

self.is_checked = ko.observable(true); 

und

data-bind="checked: is_checked" 

Es wird funktionieren. Wenn Sie das Kontrollkästchen deaktivieren, wird der Wert von is_checked aktualisiert. Wenn es Ihnen wirklich wichtig ist, dass es Ja/Nein und nicht Wahr/Falsch ist, dann müssen Sie Code schreiben, um den Wahr/Falsch-Prüfstatus in Ja/Nein zu übersetzen. Es gibt ein paar Möglichkeiten, wie du das machen kannst. Ich würde ein berechnetes Observable versuchen. Siehe hier: http://jsfiddle.net/jLkxG/7/

Verwandte Themen