从模板发送到组件生命周期方法时数据损坏了？

Question

EMBER VERSION 3.10

描述

如果我将对象的数组从模板（在模板视图中迭代数组之后）传递给组件，然后尝试以该组件的生命周期方法之一访问数据。数据已损坏。

代码

  

controllers / application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  users: [{name:1},{name:2},{name:3}]
});

  

templates / application.hbs

{{#each users as |user|}}
  <p>{{user.name}}</p>
{{/each}}

<FilterUsers @users={{users}} />
{{outlet}}

  

templates / components / filter-users.hbs

empty file

  

components / filter-users.js

import Ember from 'ember';
export default Ember.Component.extend({
  init(){
    this._super(...arguments);
    console.log(this.get('users'));
  }
});

输出

有错误

没有错误

如果我从application.hbs中删除了每个块，则对数组进行了迭代。我得到了适当的结果。

  

templates / application.hbs

<FilterUsers @users={{this.users}} />
{{outlet}}

我是ember的新手，这是bug还是我没有使用ember方式？

Answer 1

这是调试功能！

您的对象包装在代理对象中。因为在模板中使用{{user.name}}后，您可能无法执行this.get('users')[0].name = "bla"，但必须执行this.get('users')[0].set('name', 'bla')才能使余烬更新模板。如果尝试此操作，则代理对象将引发错误。 由于代理并非在所有浏览器中都可用，并且可能会对性能产生影响，因此在生产版本中并未做到这一点。因此，在生产版本中没有代理。

（旁注：如果在任何情况下都可以使用代理，则完全不需要this.get('users')[0].set('name', 'bla')。没有代理就无法检测到this.get('users')[0].name = "bla"，并且这会破裂。因此开发中的代理应该通过抛出错误来帮助您避免这种情况）

重要的部分是：代理应该没有任何作用！唯一看起来不同的是调试日志，因为显示了代理信息。因此，您必须打开对象以查看name，然后单击它以执行吸气剂：

但是这样的代码仍然可以使用：

console.log(this.get("users")[0].name);