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

Question

我目前正在学习 Ember 的新组件数据向下、动作向上范例。然而，正如 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 对象的更新方法被调用以将模型属性设置为新值。不过，我的想法似乎有问题，因为这是行不通的。 "standard" 现在这样做的方法是什么？我正在使用 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}}

mut 辅助函数和 attrs 的预期用途是微光组件，也称为尖括号组件，目前未在 Ember.js 的稳定版本中发布。

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

Best practices for the input helper in new Ember components

javascript

data-binding

handlebars.js

ember.js