自定义对象上的 Ember 绑定答案

【问题标题】：Ember binding on custom objects自定义对象上的 Ember 绑定
【发布时间】：2016-11-13 03:10:27
【问题描述】：

基本上，在crit-service 中，我创建了 Ember 对象“Crits”和“Crit”，并用一些数据填充它们。

crit-service 被两个不同的组件使用，它们基本上做同样的事情：显示 Crits。

问题是“更改”按钮不起作用。通过调试，我看到值已更改，但视图未更新。为什么是这样？由于 Ember.Object 是可观察的，不应该设置一个值通知模板吗？最重要的是，我怎样才能让它发挥作用？

附：我已经看到了使用 Ember.A() 而不是 Objects 的解决方法。但是，这会增加样板，因为我的数据模型实际上是对象，而不是键值对数组。

【问题讨论】：

【解决方案1】：

这似乎是 {{#each-in}} 助手的问题，它不会在更改时重新加载。一个快速的解决方法是使用 {{get}} 助手。

所以不要这样：

{{#each-in obj as |key val|}}
  {{key}}={{val}}
{{/each-in}}

这样做：

{{#each-in obj as |key|}}
  {{key}}={{get obj key}}
{{/each-in}}

但是，如果您添加其他属性，这将永远不会起作用。

here 是该解决方案的有效解决方案。

另一个始终有效的解决方案是在组件上调用.rerender()。这要归功于 glimmer，它只更新 DOM 中已更改的部分。但是，您必须在两个组件的公共根组件上调用它，或者在两个组件上调用它。

【讨论】：

“添加其他属性”是什么意思？你的意思是，动态地投入额外的属性，例如crit.set("newProp", "newVal")?顺便说一句，我尝试在模板中的任何地方添加gets，但它仍然不起作用……你能提供一个有效的Twiddle吗？
@是的，我就是这个意思。我更新了我的答案。