Emberjs 获取数组属性 returns 未定义

Question

我想在组件中定义一个反应数组属性，这样每次数组更新时，它都会自动更新必要的HTML内容。

我以为这会很简单，但它并没有像我预期的那样工作。每次我通过 this.get('array') 检索属性时，它 returns 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 方法中，如果我在设置后立即检索数组属性，它也会 returns undefined。为什么会这样？

这里是twiddle。它应该迭代数组，并显示所有项目的列表，但它目前正在崩溃，因为它 returns 未定义。

Answer 1

您目前看到的问题是您需要在set方法中添加一个return。您还应该使用 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 获取数组属性 returns 未定义

Emberjs Getting array property returns undefined

ember.js

Emberjs 获取数组 属性 returns 未定义

Emberjs Getting array property returns undefined

ember.js

Emberjs 获取数组属性 returns 未定义