javascript - 新 Ember 组件中输入助手的最佳实践

Question

我目前正在学习 Ember 的新组件数据向下、 Action 向上范例。正如所讨论的here但是，有时我想允许子组件显式修改属性。这就是 mut 助手的用武之地:它为传入的值创建一个包装器，包含一个(只读？)值和一个更新它的函数。该页面上的示例是一个简单的按钮，它会增加一个计数器。

如果我在组件内使用输入助手，这个概念如何运作？例如，假设我正在构建一个由一堆特殊表单组件组成的表单:

// templates/index.hbs
<form>
    {{form-control value=(mut model.firstValue)}}
    {{form-control value=(mut model.secondValue)}}
</form>

如果form-control组件只是负责包装输入控件的任务，那么我们如何正确使用传入的mut对象呢？是不是有点像？

// templates/components/form-control.hbs
{{input type="text" value=attrs.value.value input=attrs.value.update}}

我的想法是:输入元素的值设置为 mut 对象的值，每当输入值发生变化(HTML5 输入事件)时，mut 的更新方法 对象被调用以将模型属性设置为新值。不过，我的想法似乎有问题，因为这是行不通的。现在这样做的“标准”方法是什么？我正在使用 Ember 1.13.8。

Answer 1

在经典组件中(与 glimmer 组件相反)，所有绑定(bind)都是可变的，因此通常不需要使用 mut 帮助程序。以下应该可以正常工作:

// templates/index.hbs
<form>
  {{form-control value=model.firstValue}}
  {{form-control value=model.secondValue}}
</form>

// templates/components/form-control.hbs
{{input type="text" value=value}}

mut 助手和 attrs 的预期用途是用于 glimmer 组件，也称为尖括号组件，目前尚未在 Ember.js 的稳定版中发布发布。