Knockout benutzerdefinierte Komponenten nicht aktualisieren

Question

Ich habe eine benutzerdefinierte Komponente, die Funktionen verwendet, um die Parameter übergeben. In diesem Fall ändert sich der beobachtbare Wert ($ data) nicht, aber die Funktion verwendet eine andere Observable (die sich ändert) und eine Hash-Tabelle (die sich ändert, aber nicht beobachtbar gemacht werden kann).

Die Anzeige wird aktualisiert, wenn ich diese Syntax verwenden:

 <span style="width: 50px; position: absolute; left: 1100px;text-align:center" data-bind="component: {name: ''rotate'', params: {values: Helper.GetWeatherByFlight($data, ''Hi'')}}"></span> 

Aber es wird nicht aktualisiert, wenn ich diese Syntax verwenden:

ko.components.register('rotate', { 
    viewModel: function (params) { 
     var values = []; 
     var inputValues = ko.isObservable(params.values) ? params.values() : params.values; 
     var length = inputValues.length; 
     this.MyClass = length > 1 ? "fade-effect" : ""; 
     if (length >= 1) { 
      var index = m_counter % length; 
      $.each(inputValues, function (i, value) { 
       var opacity = (index == i) ? 1 : 0; 
       values.push({ value: value, opacity: opacity }); 
      }); 
     } 
     this.values = values; 
    }, 
    template: '<span style="position:relative;" data-bind="foreach: values, attr: { class: MyClass }">\ 
        <span style="left:0px;top:0px;position:absolute;width:100%;height:100%;" data-bind="text: Helper.GetValue(value, $element), style: {opacity: opacity}"></span>\ 
       </span>' 
}); 

:

 <rotate style="width: 50px; position: absolute; left: 1100px;text-align:center" params="{values: Helper.GetWeatherByFlight($data, ''Hi'')}"></rotate> 

Dies ist die Komponente Ich würde es vorziehen, das zweite Format verwenden zu können, aber jetzt bin ich mit dem ersten festgefahren. Gibt es etwas, das ich ändern kann, entweder in der Komponente oder in der Art, wie die Komponente aufgerufen wird, damit beide Formate korrekt aktualisiert werden? Ich erkenne, dass dies eine etwas unkonventionelle Nutzung ist.

Answer 1

Der einzige Grund, Ihre Komponente im ersten Fall aktualisiert ist, dass die Komponente Bindung für Änderungen sucht, und dann neu initialisiert die gesamten Komponente, wenn es irgendein erkennt.

Die Rotate Komponente selbst behandelt nicht Ihre Parameter, wie sie beobachtbar sind, es ist nur Blick auf die unverpackten Werte, so gibt es nichts zu sagen, um seine Sicht zu aktualisieren. Sie müssen das Komponentenansichtsmodell neu schreiben, um Observables und berechnete Eigenschaften zu verwenden, damit es auf Änderungen in den Daten reagieren kann.

Etwas wie folgt aus:

viewModel: function (params) { 
    var self = this; 
    this.inputValues = params.values; //preserve the observable instead of unwrapping its values 
    this.MyClass = ko.observable(""); 

    //values is a computed property so that it updates when the dependent observable (inputValues) is modified. 
    this.values = ko.computed(function(){ 
     var values = []; 
     //use ko.unwrap to safely handle either case of inputValues being an observable or non-observable. 
     var length = ko.unwrap(self.inputValues).length; 
     self.MyClass(length > 1 ? "fade-effect" : ""); 
     if (length >= 1) { 
      var index = m_counter % length; 
      $.each(ko.unwrap(self.inputValues), function (i, value) { 
       var opacity = (index == i) ? 1 : 0; 
       values.push({ value: value, opacity: opacity }); 
      }); 
     } 
     return values; 
    }); 
},