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

Question

我目前正在了解Ember的新数据下降,组件的动作范式.正如所讨论的在这里,但是,有时候我希望让孩子组件明确修改属性.这就是mut助手的用武之地:它为传入的值创建一个包装器,包含一个(readonly？)值和一个更新它的函数.该页面上的示例是一个简单的按钮,用于递增计数器.

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

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

如果表单控件组件只是包装输入控件的任务,我们如何正确使用传入的mut对象？是这样的吗？

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

我在这里思考:输入元素的值被设置为mut对象的值,并且每当输入值改变(HTML5输入事件)时,调用mut对象的update方法以将model属性设置为新值.我的想法似乎有些不对劲,因为这不起作用.现在这样做的"标准"方式是什么？我正在使用Ember 1.13.8.

Answer 1

在经典组件（与 glimmer 组件相反）中，所有绑定都是可变的，因此通常不需要使用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}}

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