Question

我刚刚开始学习1个星期前的ember，我对数据绑定感到困惑：

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

索引

index.hbs // template

parent value  : {{foo}}

{{test-component bar=foo }}

index.js // controller

import Ember from 'ember';

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

测试组件//模板

child value {{bar}}

test-component // component

import Ember from 'ember';

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

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

export default TestComponent;

令人困惑的是：

如果将我的索引模板中的组件写为{{test-component foo}}，我只获得单向数据绑定，这意味着如果我更改组件中的bar属性，{{ 1}}属性不会改变。
如果我在我的组件中使用foo，我可以看到{{input value=bar}}和bar都得到更新，因此bar被绑定到foo和输入值组件？？它是如何工作的（PS：正如我在问题1中说的那样，只有当我在我的索引模板中写foo

并感谢大家。

Answer 1

最好避免双向绑定，并依赖于分离这两个动作。这称为 Data Down;行动。为了说明您的模板，可能如下所示：

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

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

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

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

显然，这是一个可以被打破的经验法则（请参阅{{input}}助手以获取违反规则的示例）。但你应该知道何时以及为什么你这样做时会偏离幸福的道路。如果您的目标是编写所有组件，而不是更改它们所提供的数据，而是触发操作，那么它将使您的应用程序更容易推理和维护。

Answer 2

更新：位置参数具有单向绑定且命名参数具有双向绑定的行为是Ember版本中的bug＆lt; 2.9.0。

~~传递命名参数时更新控制器的原因，而不是传递位置参数的原因是命名参数是绑定的而位置参数不是。~~

~~<击> I copied your example into an Ember Twiddle that illustrates the difference~~

从父级到子级的数据绑定

2 个答案: