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。它应该迭代数组，并显示所有项的列表，但它当前崩溃，因为它返回undefined。

Answer 1

您目前遇到的问题是，您需要在return方法中添加set。此外，您应该使用Ember.computed('array.[]')语法来监听数组本身的更改。

但是你最好使用Ember阵列，这样你就不需要第二个阵列了：

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>

Emberjs获取数组属性返回undefined

1 个答案: