ember.js 如何在Ember JS(Octane)中的“each”帮助器中改变数组的值

1tuwyuhd 于 2022-11-05 发布在其他

关注(0)|答案(2)|浏览(187)

我有一个字符串数组作为参数传递给一个组件，在组件中我使用“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>

我遇到了错误“未捕获（在承诺中）错误：Assert失败：如果有人能告诉我这里出了什么问题，我将非常感激。

ember.js

来源：https://stackoverflow.com/questions/59978845/how-to-mutate-an-arrays-value-in-each-helper-in-ember-js-octane

2条答案

按热度按时间

7xzttuei1#

从helper派生的值（在您的例子中是each）不能使用mut helper进行转换，因为helper通常不会传递或保存这些值来更改原始属性。
例如，
如果我们将capitalize作为辅助变量的值进行如下修改，这是有意义的：

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

但是，下面的代码段不适合作为helper返回值的一种方式！

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

each助手也是这样，循环值不能被改变！这段代码注解可能对进一步挖掘有用。
您可以更改代码段以处理支持组件类中的onChange：
第一个

赞(0）回复(0）举报 2022-11-05

fjaof16o2#

解决了这个问题。为了其他人的利益发布完整的实现。我按照Gokul的建议将索引值传递给组件的操作，但是遇到了另一个问题。没有直接的方法来改变数组的值。所以我使用了可变数组的replace方法。这又引起了另一个问题，每次我在文本输入中输入一个字符时，它都会改变数组值并重新呈现列表，从而将焦点从输入中移走。因此，在“each”帮助器中，我必须设置key="@index”它告诉帮助器只有在数组索引（而不是值）发生更改时才重新呈现。
第一个

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js 如何在Ember JS(Octane)中的“each”帮助器中改变数组的值

2条答案

相关问题

热门标签

最新问答