如何在 Ember JS 中改变"each"助手中的数组值(辛烷值)

Question

我有一个字符串数组作为参数传递给组件，在组件内部，我使用"each"助手在文本输入中呈现每个字符串。 我尝试了以下方法。

MainComponent.hbs
<Component @model={{model}}/>
//Eg: model.list = ["Jack", "Sparrow"];
Component.hbs
<div>
{{#each this.args.model.list as |name|}}
<div>           
<PaperInput @value={{ name }} 
@placeholder="Enter a Name"
@onChange={{action (mut name)}}/>        
</div>
{{/each}}
</div>

我遇到错误"未捕获(承诺(错误：断言失败：您只能传递路径到mut"。如果有人能让我知道这里出了什么问题，将不胜感激。

Answer 1

从帮助程序派生的值(在您的情况下each(不能使用帮助程序进行mut因为帮助程序通常不会传递或保留值来更改原始属性。

例如

如果我们改变一个值，如下所示，capitalize是一个帮助程序，这是有意义的：

<button {{action (mut name) (capitalize name)}}>
Capitalize
</button>

但是，下面的代码片段不适合，因为帮助程序单向返回值！

<button {{action (mut (capitalize name)) name}}>
Capitalize
</button>

each助手也发生了同样的事情，循环值不能改变！此代码注释可能对进一步挖掘有用。

您可以更改代码段以处理后备组件类中的onChange：

<div>
{{#each this.args.model.list as |name index|}}
<div>           
<PaperInput @value={{ name }} 
@placeholder="Enter a Name"
@onChange={{this.changeName index}}/>        
</div>
{{/each}}
</div>

// component.js
changeName(index, nameToBeUpdated) {
// change the name here...
}

Answer 2

想通了。发布完整的实现以造福他人。我按照 Gokul 答案中的建议将索引值传递给组件的操作，但遇到了另一个问题。没有直接的方法可以更改数组的值。所以我使用可变数组的替换方法来做到这一点。这又导致了另一个问题，每次我在文本输入中输入字符时，它都会追逐数组值并重新呈现列表，从而将焦点从输入中移开。因此，在"每个"帮助程序中，我必须设置 key="@index"，它告诉帮助程序仅在数组索引更改而不是值时才重新渲染。

Component.js
@action
updateName( index, name ) {
this.args.model.list.replace(index, 1, [name]);     
}

MainComponent.hbs
<Component @model={{model}}/>
Component.hbs
{{#each this.args.model.list key="@index" as |name index|}}
<div>           
<PaperInput @value={{ name }} 
@placeholder="Enter a Name"
@onChange={{action this.updateName index}}/>        
</div>
{{/each}}