EmberJS, Helfer und ComputedProperty

Question

Ich habe einen Helper, der ein Array von Elementen empfängt und ein anderes Array basierend auf dem ersten zurückgibt.

{{#each (sorted-strings myStrings) as |string|}} 
    {{string}} 
{{/each}} 

Die Umsetzung des Helper kann wie etwas sein:

// app/helpers/sorted-strings.js 
import Ember from 'ember'; 

export function sortedStrings(params/*, hash*/) { 
    return params[0].sort(); 
} 

export default Ember.Helper.helper(sortedStrings); 

The Helper ok funktioniert, aber wenn die ursprüngliche myString Array ändert sich die Änderungen nicht die bereits erbrachten Liste zu beeinflussen sind.

Wie kann ich kombinieren, um das Verhalten eines ComputedProperty und das Ergebnis eines Helper?

Answer 1

Nach einer Menge Schwierigkeiten habe ich gerade herausgefunden, dass die richtige Lösung ist, eine Komponente anstelle von Helper zu deklarieren. Auf diese Weise kann ich explizit eine Computed Property erklären, dass Veränderungen in den myStrings beobachtet Array:

// app/components/sorted-strings.js 
export default Ember.Component.extend({ 
    myStrings: null, 
    sortedMyStrings: Ember.computed('myStrings', function() { 
    return this.get('myStrings').sort(); 
    }); 
}); 

// app/templates/components/sorted-strings.hbs 
{{#each sortedMyStrings as |string|}} 
    {{string}} 
{{/each}} 

// template 
{{sorted-strings myStrings=myStrings}} 

Answer 2

Die Übergabe einer berechneten Eigenschaft an den Helper sollte gut funktionieren. Überprüfen Sie diese twiddle.

Möglicherweise wird Ihre berechnete Eigenschaft nicht ordnungsgemäß aktualisiert.

Answer 3

Verwenden Sie notifyPropertyChange(), die den Helper benachrichtigen, dass das Array geändert wurde. Ich denke, dass der Helfer einen Verweis auf das Array hat und nicht weiß, dass es die Inhalte oder die Länge

Gefällt Ihnen dieses

actions: { 
    add() { 
    this.get('myStrings').pushObject('testing'); 
    this.notifyPropertyChange('myStrings'); 
    } 
    } 

verändert hat ich die Twiddle aktualisiert haben - hier ist der neue Link https://ember-twiddle.com/31dfcb7b208eb1348f34d90c98f50bbb?openFiles=controllers.application.js%2C