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

Question

EMBER 版本 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 的新手，所以这是一个错误还是我没有按照 ember 的方式做？

Answer 1

这是调试功能！

您的对象包装在代理对象中。因为在模板中使用 {{user.name}} 之后，您可能不会执行 this.get('users')[0].name = "bla"，但必须为 ember 执行 this.get('users')[0].set('name', 'bla') 才能更新模板。如果您尝试这样做，代理对象将抛出错误。由于代理并非在所有浏览器中都可用，并且可能会对性能产生影响，因此在生产构建中不会这样做。所以在生产构建中没有代理。

（旁注：如果代理在所有情况下都可用，则您根本不需要执行 this.get('users')[0].set('name', 'bla')。如果没有代理，则无法检测到 this.get('users')[0].name = "bla"，这会中断。所以代理在开发应该通过抛出错误来帮助您避免这种情况）

重要的部分是：代理应该没有效果！唯一看起来不同的是调试日志，因为显示了代理信息。所以你必须打开对象才能看到 name 然后点击它来执行 getter:

但是这样的代码仍然有效：

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

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

Data corrupted when sending from template to component lifecycle method?

javascript

ember.js

这是调试功能！