Emberjs Das Erhalten der Array-Eigenschaft gibt undefined zurück

Question

Ich möchte eine reaktive Array-Eigenschaft in einer Komponente definieren, so dass bei jeder Aktualisierung des Arrays der erforderliche HTML-Inhalt automatisch aktualisiert wird.

Ich dachte, das würde einfach sein, aber es hat nicht so funktioniert, wie ich es erwartet hatte. Jedes Mal, wenn ich die Eigenschaft über this.get('array') abruft, wird undefined zurückgegeben.

// components/test-component.js 
export default Ember.Component.extend({ 
    _array: [], 

    array: Ember.computed('_array',{ 
    get(key) { return this.get('_array'); }, 
    set(key,value) { this.set('_array', value); } 
    }), 

    isEmpty: Ember.computed('array', function() { 
    // Here, this.get('array') returns undefined. Why? 
    return this.get('array').length; 
    }), 

    actions: { 
    addNew() { 
     this.get('array').push(Date.now()); 
    } 
    }, 

    init() { 
    this._super(...arguments); 

    this.set('array', [1,2,3]); 
    }, 
}); 

Ich habe auch bemerkt, dass in der init Methode, wenn ich die Array-Eigenschaft direkt nach dem Abbinden es abrufen, es undefined auch zurückgibt. Warum passiert dies?

Hier ist ein twiddle. Es soll das Array iterieren und eine Liste aller Elemente anzeigen, aber es stürzt momentan ab, weil es undefined zurückgibt.

Answer 1

Das Problem, das Sie gerade sehen, ist, dass Sie eine return in der set Methode hinzufügen müssen. Außerdem sollten Sie die Syntax Ember.computed('array.[]') verwenden, in der Sie auf Änderungen am Array selbst achten.

Aber Sie wäre besser dran, ein Ember Array so, dass Sie nicht ein zweites Array benötigen:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    array: undefined, 
    init() { 
    this._super(...arguments); 
    this.set('array', Ember.A()); 
    }, 
    actions: { 
    addNew() { 
     this.get('array').addObject(Date.now()); 
    } 
    } 
}); 

und

<ul> 
    {{#each array as |item|}} 
    <li>{{item}}</li> 
    {{else}} 
    <li>No items</li> 
    {{/each}} 
</ul> 
<button onclick={{action 'addNew'}}>Add New</button>