ractive array ändert sich, aber kein berechneter Wert

Question

Ich verwende ein Array von Objekten als Daten für meine ractive Komponente (von einer PouchDB erhalten), die innerhalb der ractive für die richtige Ausgabe gefiltert werden muss. Aber alles, was ich probiert habe - auch wenn die Daten, die als "Docs" bezeichnet werden, korrekt geändert werden, bleiben die gefilterten aka berechneten Werte gleich.

ich mit Methode versucht:

new Ractive({ 
     el: '#container', 
     template: Listing, 
     magic: true, 
     modifyArrays: true, 
     data: {docs}, 
     computed: { 
      List: function(){ 
       let tempList = []; 
       for(var i = 0; i < docs.length; i++) { 
        if (docs[i].specificValue == otherValue) { 
         let newValue = docs[i]; 
         tempList.push(newValue); 
        } 
       } 
       return tempList; 
       } 
      } 
    }); 

mit einem Helfer-Objekt

Ractive.defaults.data.helper = function() { 
     for (var i = 0; i < docs.length; i++) { 
      if (docs[i].specificValue == otherValue) { 
       return docs[i].whatever ; 
      } 
     } 
    } 
new Ractive({ 
     el: '#container', 
     template: '{{helper()}}', 
     magic: true, 
     modifyArrays: true, 
     data: {List: docs} 
    }); 

und einer Datenfunktion als

in Ractive computed property beschrieben aber nichts daran gearbeitet, die Art und Weise zu erwarten. Wenn ich Dokumente direkt verwende, funktioniert die Bindung wie erwartet.

PS: der Code kann ein bisschen peinlich aussehen, weil ich nur kopiert und vereinfacht.

Answer 1

Aktiv relies on the presence of this.get() um zu wissen, von welchen Daten eine Berechnung abhängt.

Damit kann die Flächeneigenschaft wie jede andere behandelt werden. Es wird aktualisiert, reaktiv (weil die Anrufe(), um ractive.get Ractive sagen, dass es neu berechnet werden sollte, wenn Breite oder Höhe ändern), so dass Sie tun können ...

In Ihrem Beispiel Sie zugreifen docs direkt . Wir wissen nicht, dass docs eine Abhängigkeit von List ist.

Hier ist ein Vergleichsbeispiel einer Liste this.get() vs ein verwenden, das nicht der Fall ist:

var arr = [0, 1, 2, 3]; 
 

 
new Ractive({ 
 
    el: 'body', 
 
    template: ` 
 
    \t <div>Working: {{# workingList }}{{.}}{{/}}</div> 
 
    \t <div>Not working: {{# nonWorkingList }}{{.}}{{/}}</div> 
 
    `, 
 
    magic: true, 
 
    modifyArrays: true, 
 
    data: { 
 
    list: arr 
 
    }, 
 
    computed: { 
 
    workingList() { 
 
     return this.get('list').map(n => `#${n}`); 
 
    }, 
 
    nonWorkingList() { 
 
     return arr.map(n => `#${n}`) 
 
    } 
 
    } 
 
}); 
 

 
setInterval(() => { 
 
    arr.push(arr.length); 
 
}, 1000);

<script src="https://unpkg.com/ractive@0.8.9/ractive.min.js"></script>