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

Best practices for the input helper in new Ember components

本文关键字：最佳 Ember 组件 输入      更新时间：2023-09-26

我目前正在学习Ember新的组件的向下数据，向上操作范式。但是，正如这里所讨论的，有时我希望允许子组件显式地修改属性。这就是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

在经典组件(与微光组件相反)中，所有绑定都是可变的，因此通常不需要使用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 helper和attrs的预期用途都是用于微光组件，也称为尖括号组件，目前未在Ember.js的稳定版本中发布。

相关文章：