2012-07-17 16 views
52

Bei Verwendung von Knockout, was ist der Vorteil der Verwendung von schreibgeschützten berechneten Observablen anstelle von einfachen Funktionen?Knockout: berechnete Observable vs Funktion

Nehmen Sie die folgenden Ansichtsmodell Konstruktor und HTML-Schnipsel, zum Beispiel:

var ViewModel = function(){ 
    var self = this; 
    self.someProperty = ko.observable("abc"); 
    self.anotherProperty = ko.observable("xyz"); 
    self.someComputedProperty = function(){ 
     return self.someProperty() + self.anotherProperty(); 
    };  
}; 

<input data-bind="value: someProperty"/> 
<input data-bind="value: anotherProperty"/> 
<p data-bind="text: someComputedProperty()"></p> 

Alles hier scheint zu funktionieren, wie man erwarten würde, so gibt es einen Grund, warum ich stattdessen verwenden sollten:

​var ViewModel = function(){ 
    var self = this; 
    self.someProperty = ko.observable("abc"); 
    self.anotherProperty = ko.observable("xyz"); 
    self.someComputedProperty = ko.computed(function(){ 
     return self.someProperty() + self.anotherProperty(); 
    });  
}; 


<input data-bind="value: someProperty"/> 
<input data-bind="value: anotherProperty"/> 
<p data-bind="text: someComputedProperty"></p> 

Ich stelle fest, dass die Dokumentation unter http://knockoutjs.com/documentation/computedObservables.html besagt, dass "... deklarative Bindungen einfach als berechnete Observablen implementiert werden", also bedeutet das, dass ich sie explizit in meinen Viewmodels verwenden muss?

Antwort

71

Wenn der einzige Zweck Ihrer berechneten Observablen darin besteht, eine einfache Bindung dagegen durchzuführen, wäre die Verwendung einer Funktion äquivalent. Bindungen werden innerhalb einer berechneten Observablen implementiert, um die Abhängigkeiten zu verfolgen, sodass die Bindung erneut ausgelöst wird, wenn sich eine der Observablen ändert.

Hier sind ein paar Dinge zu berechneten Observablen vs. Funktion

  • der Wert eines beobachtbaren berechnet betrachten zwischengespeichert wird, so wird es nur dann aktualisiert, wenn es erstellt wird und wenn eine Abhängigkeit aktualisiert wird. Für eine normale Funktion müssten Sie die Logik jedes Mal ausführen. Wenn viele Dinge von diesem Wert abhängen (z. B. dass jedes Element in einer Sammlung gegen einen Wert vom übergeordneten Element bindet), wird diese Logik immer wieder ausgeführt.

  • In Ihrem JavaScript können Sie auch berechnete Observablen wie andere Observablen verwenden. Dies bedeutet, dass Sie manuelle Subskriptionen für sie erstellen können und von anderen Berechnungen abhängig sind (das Aufrufen einer Funktion würde auch diese Abhängigkeit erzeugen). Sie können sich auf die normalen Hilfsmethoden in KO wie ko.utils.unwrapObservable verlassen, um generisch zu bestimmen, ob Sie es als Funktion aufrufen müssen oder nicht, um den Wert abzurufen.

  • Wenn Sie den Wert letztendlich an den Server senden möchten, wird natürlich eine berechnete Observable in Ihrer JSON-Ausgabe angezeigt, während ein Wert, der das Ergebnis einer normalen Funktion ist, einfach bei der Konvertierung in JSON verschwindet um mehr Arbeit zu leisten, um eine Eigenschaft von dieser Funktion zuerst zu füllen).

+0

Große Antwort: Danke! – Duncan

+1

Gute Antwort. Ich benutze manchmal eine Funktion anstelle einer berechneten, wenn ich möchte, dass die volle Logik jedes Mal ausgeführt wird. –

+1

Woher weiß es, dass ein berechnetes Observable von einem anderen Observablen abhängt, wenn alles, was ich passiert habe, eine Funktion war? Wird diese Funktion analysiert? - Zeit, um den Knockout-Quellcode zu lesen, ich denke, – zod