在 ember.js 中，如何跨 3 个组件绑定一个属性？答案

【问题标题】：In ember.js, how can I bind an attribute across 3 components?在 ember.js 中，如何跨 3 个组件绑定一个属性？
【发布时间】：2017-10-01 23:35:24
【问题描述】：

my-textfield 的 JS 文件如下所示：

import layout from '../templates/components/my-textfield';

export default Ember.component.extend({
  id: '',
  layout,
  tagName: ''
});

my-textfield 的车把文件如下所示：

<div>
  {{my-textfield/input id=id}}
  {{my-textfield/label for=id}}
</div>

my-textfield/input 的 JS 文件如下所示：

export default Ember.TextField.extend({});

如果我使用 ID 为 {{my-textfield id="rawr"}} 的组件，我会得到以下输出：

<div>
  <input id="rawr" class="ember-text-field ember-view">
  <span class="ember-view" for="rawr"></span>
</div>

如果我没有将 ID 传递给我的组件 {{my-textfield}}，Ember.TextField 将生成它自己的 ID。

<div>
  <input id="ember3972" class="ember-text-field ember-view">
  <span class="ember-view" for></span>
</div>

我正试图在生成 ID 时，将 span 中的 for 属性更新为相同的值。

我希望它会自动发生，因为它们都指向我组件上的相同属性。但既然没有，我一直试图弄清楚如何将它们绑定在一起一段时间。我发现了 mut 助手并尝试使用它：

<div>
  {{my-textfield/input id=(mut id)}}
  {{my-textfield/label for=id}}
</div>

但这没有用。这只是让我在每个组件中的所有 ID 都相同。

我需要在这里做什么才能完成这项工作？

【问题讨论】：

我提供的答案对您没有帮助吗？

标签： javascript ember.js data-binding

【解决方案1】：

这是一个非常有趣的问题。我想我可以解决你的问题，但我不确定你的 my-textfield component 是如何工作的，但我将如何解决这个问题。我会有一个组件 my-textfield 和以下 .hbs 文件：

<div>
  <input id={{id}} />
  <label for={{id}}></label>
</div>

在调用该组件时只需将id 传递给它。

{{my-textfield id="someId"}}

现在，假设由于某种原因您无法采用上述方法，您希望继续：

<div>
  {{my-textfield/input id=id}}
  {{my-textfield/label for=id}}
</div>

您可以使用 jQuery 来获取兄弟元素的ID，我假设您知道如何。或者您可以使用component.js 中的this.elementId 或component.hbs 中的{{this.elementId}} 访问组件的id，然后您应该能够传递此值并根据需要使用它。

【讨论】：

【解决方案2】：

您的my-textField 没有tagName；这意味着 ember 不会为其生成 id；因此，当您没有将 id 属性传递给它时，以下内容没有任何意义：

  {{my-textfield/input id=id}}
  {{my-textfield/label for=id}}

id 未定义；你传递给子组件的是什么？只是一个未定义的值。

请检查我在下面的twiddle 中做了什么。我将my-textfield 定义为有一个div 标签并让ember 为其生成一个id。之后，我在my-textfield.js 文件中声明了一个计算属性（idToPass），并将其作为my-textfield/my-input 组件的id 和my-textfield.hbs 文件中my-textfield/my-label 组件的for 传递。通过这种方式；我确保通过 Ember 为 my-textfield 自动生成的 id 将受控的 id 分配给 my-input，并将相同的值作为 for 属性传递给 my-label。

【讨论】：