Emberjs配列プロパティの取得が返されない

Question

配列が更新されるたびに必要なHTMLコンテンツが自動的に更新されるように、コンポーネントに反応性配列プロパティを定義したいとします。

これは簡単なことだと思っていましたが、期待通りに機能しませんでした。 this.get('array')でプロパティを取得するたびに、undefinedを返します。

// 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]); 
    }, 
}); 

また、私は右のそれを設定した後、アレイのプロパティを取得する場合init方法では、それはまたundefinedを返すことに気づきました。なぜこうなった？

ここにはtwiddleがあります。それは、配列を反復し、すべての項目のリストを表示するはずですが、未定義を返すので、現在クラッシュしています。

Answer 1

returnをsetメソッドに追加する必要があるという問題が発生しています。配列自体の変更をリッスンする場合は、Ember.computed('array.[]')構文を使用する必要があります。

しかし、あなたが二番目の配列必要がないように、あなたはエンバーのアレイを使用したほうが良いでしょう：あなた場合にのみ、これまで `Ember.A`が必要

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()); 
    } 
    } 
}); 

と

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