将数据传递给 Ember Octane 组件时不需要的双向数据绑定

Question

I'm following the Full Stack Ember with Rails course on Embercasts . As they don't use Octane yet, I change the code where necessary to work with Ember 3.22. I'm stuck in video 22 where I need to pass data to a component. This data should only be passed to the component, but when updating a value inside it, I don't want to see the change in other places.

In the video, this is taken care of in a didReceiveAttrs() handler, but this is not available in Octane. Instead, the Ember docs describe one way data flow as what happens automatically. In my case, it doesn't:

{{! author.edit.hbs !}}

<h3>Editing: {{model.last}},  {{model.first}}</h3>
<AuthorForm @author={{model}} />

{{! author-form.hbs !}}

<div class="field">
  <label for="first">First name</label>
  <Input @id="first" type="text" placeholder="First name" @value={{this.author.first}}/>
</div>  

<div class="field">
  <label for="last">Last name</label>
  <Input @id="last" type="text" placeholder="Last name" @value={{this.author.last}}/>
</div>

The h3 updates whenever I change the value in one of the component's inputs. What's wrong here?

Answer 1

The <Input> component shipped with Ember.js uses two-way data binding for the value.

Arguments passed to a component are immutable. You can not change this.args nor a value passed with @ . But object passed in as values of arguments are not frozen.

Taking this template as an example:

<Input @value={{@post.title}}/>

It will not mutate @post but the title property of the object passed in as @post argument.