向Ember Octane组件传递数据时出现不必要的双向数据绑定

yqyhoc1h  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(129)

我正在Embercasts上学习Full Stack Ember with Rails课程。由于他们还没有使用Octane,我在需要使用Ember 3.22的地方修改了代码。我在视频22中卡住了,我需要将数据传递给一个组件。这些数据应该只传递给组件,但是当更新组件内部的值时,我不想看到其他地方的变化。
在视频中,这是在一个didReceiveAttrs()处理程序中处理的,但Octane中没有。相反,Ember文档将单向数据流描述为自动发生的事情。在我的例子中,它没有:

{{! 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>

每当我改变组件的一个输入值时,h3就会更新。

qmelpv7a

qmelpv7a1#

Ember.js附带的<Input>组件对该值使用双向数据绑定。
传递给组件的参数是不可变的。您不能更改this.args,也不能更改用@传递的值。但作为参数值传递的对象不会被冻结。
以本模板为例:

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

它不会改变@post,而是改变作为@post参数传入的对象的title属性。

相关问题