如何在Ember JS (Octane)的"each“helper中改变数组的值

Question

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

​

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>

​

我遇到了错误"Uncaught (in promise) Error: Assertion Failed: You can pass a path to mut“。如果有人能让我知道这里出了什么问题，我将不胜感激。

Answer 1

从帮助器(在您的例子中为each)派生的值不能使用mut帮助器改变，因为帮助器通常不会向下传递或保持这些值来更改原始属性。

例如,

如果我们像下面这样改变一个值，这是有意义的，其中capitalize是一个帮助器：

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

然而，下面的代码片段并不适合，因为helper单向返回值！

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

同样的事情也发生在each帮助器上，循环通过的值不能改变！此code comment可能对进一步挖掘很有用。

您可以将代码段更改为在支持组件类中处理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的回答中的建议，将索引值传递给组件的操作，但遇到了另一个问题。没有直接的方法来改变数组的值。所以我使用可变数组的replace方法来做这件事。这又引起了另一个问题，每次我在文本输入中输入一个字符时，它都会改变数组的值，并重新呈现列表，从而将焦点从输入中转移出来。因此，在“每个”帮助器中，我必须设置索引“@key=”，它告诉帮助器只有在数组索引发生变化时才重新渲染，而不是值。

​

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

​