Javascript 新Ember组件中输入帮助器的最佳实践

我目前正在学习Ember的新组件数据向下、操作向上的范例。但是，正如前面所讨论的，有时我希望允许子组件显式修改属性。这就是mut助手的作用：它为传入的值创建一个包装器，其中包含一个（readonly？）值和一个更新该值的函数。该页面上的示例是一个简单的按钮，它增加了一个计数器

如果我在组件中使用输入助手，这个概念是如何工作的？例如，假设我正在构建一个表单，它由一系列特殊的表单组件组成：

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

我在这里的想法是：输入元素的值被设置为mut对象的值，并且每当输入值发生变化时（HTML5输入事件），就会调用mut对象的update方法来将model属性设置为新值。但我的想法似乎有问题，因为这不起作用。现在的“标准”做法是什么？我使用的是Ember 1.13.8。

在经典组件（与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}}

//模板/index.hbs
{{form control value=model.firstValue}
{{form control value=model.secondValue}
//模板/组件/表单控制.hbs
{{input type=“text”value=value}}

---

mut

辅助程序和

attrs

辅助程序的预期用途都是用于glimmer组件，也称为尖括号组件，它们目前未在Ember.js的稳定版本中发布。

这里有一个关于可变和只读辅助程序的好例子。希望这能帮上忙谢谢Tyler真的很感激。不幸的是，这对我没有多大帮助。它显示使用者的视图，即如何创建值的只读版本和要更新的操作，这两个操作都传递给组件。除非我误解了什么，否则mut助手也会这么做（即，它创建值的只读版本和更新它的操作）。当我想在输入助手中使用这两个成分时，我会迷失在组件方面……如何将只读值绑定到输入，并在输入更改时调用update方法？

// 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}}