Как изменить значение массива в «каждом» помощнике в Ember JS (Octane)

Question

У меня есть массив строк, передаваемых в качестве аргумента компоненту, внутри компонента я использую «каждый» помощник для рендеринга каждой строки в текстовом вводе. Я попробовал следующий подход.

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 (в обещании) Error: Assertion Failed: Вы можете только передать путь к 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

Разобрался. Размещение полной реализации в интересах других. Я передал значение индекса действию компонента, как предложено в ответе Гокюля, но столкнулся с другой проблемой. Не было прямого способа изменить значение массива. Так что я использовал метод замены Mutable Array для этого. Это снова вызывало другую проблему: каждый раз, когда я вводил символ в текстовом вводе, он изменял значение массива и перерисовывал список, который отвлекал внимание от ввода. Таким образом, в «каждом» помощнике я должен был установить 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}}