ember 从父级到子级的数据绑定

Question

我刚开始学习 ember 1 周前，我对数据投标有点困惑：

• 我有一个index 控制器，它有一个foor 属性，
• test-component 具有来自索引控制器 foo 属性的 bar 属性

---

索引

index.hbs // 模板

parent value  : {{foo}}

{{test-component bar=foo }}

index.js // 控制器

import Ember from 'ember';

export default Ember.Controller.extend({
  foo: "",
});

test-component // 模板

child value {{bar}}

test-component // 组件

import Ember from 'ember';

let TestComponent = Ember.Component.extend({
});

TestComponent.reopenClass({
  positionalParams: ['bar'],
});

export default TestComponent;

---

令人困惑的是：

1234563 t改变。 1234563它是如何工作的（PS：正如我在问题 1 中所说，只有当我在我的索引模板中写入 {{test-component bar=foo}} 时才会更新 foo

谢谢大家。

Answer 1

最好避免双向绑定，依靠分离两个动作。这称为数据下降；行动起来。为了说明您的模板可能如下所示：

{{test-component foo=bar update=(action (mut bar))}}

然后在您的test-component 组件中只需调用更新操作

this.get('update')(newValue);

这样 foo 在父级进行更改之前不会更改（来自(action (mut bar)) 行）。它将对谁拥有真相的担忧分开。

显然，这是一条可以被打破的经验法则（请参阅{{input}} 帮助程序，了解打破该规则的示例）。但是，您应该知道何时以及为什么在这样做时偏离了幸福的道路。如果您的目标是编写所有组件，而不是更改给定的数据，而是触发操作，那么这将使您的应用程序更易于推理和维护。

Answer 2

更新：位置参数具有单向绑定而命名参数具有双向绑定的行为在 Ember 版本 bug。

当你传入命名参数而不是传入位置参数时更新控制器的原因是命名参数被绑定而位置参数没有。

I copied your example into an Ember Twiddle that illustrates the difference.