Ember this.set 在组件中

Question

我似乎对 Ember 组件的 init 属性做错了什么。

我的代码看起来像这样。

import Ember from 'ember';

export default Ember.Component.extend({
  init(){
    this._super(...arguments);
    this.set('initial_value', this.get('value'));
  },

  change(e){
    console.log('value should be reset to ' + this.get('initial_value')) //This prints the initial value correctly.
    this.set('value', this.get('initial_value')); // this line does not update value.
    //this.set('value', 'hello'); //this line does update value.   
  }
});

为什么我可以用字符串文字更新 value 但不能用 this.get('initial_value') 更新？

我尝试了这段代码，为组件生命周期中的每个函数换出 init。我这样做是因为我认为它与渲染有关；有点像。

这里是 twiddle.

Answer 1

您可以只在 my-component.hbs 文件中包含 {{input value=value}}，当您更改输入时，它将调用输入助手中的 change 函数，该函数将调用 change 函数您的组件将其重置为 initial_value.

Answer 2

既然你用过，<input type="text" value={{value}}>，它的单向绑定。即，在组件中更改 value 时，更改将反映在输入框中，但更改输入框中的值不会更改组件中变量 value 的值。

在Ember中，DOM仅在组件中的变量值发生变化时才会更新。在my-component.js中，变量value的值没有变化。它只包含字符串文字 initial value.

例如，this.set('value', Math.random()); 这将随着变量 value 的值变化而起作用。

Why can I update value with a string literal but not with this.get('initial_value')?

It can be done only once as the value changes only 1 time. (While changing the value to string during first time)

实现你的案例, 您可以使用 {{input value=value}} 实现双向绑定。编辑输入框时，变量 value 的值发生变化。

在focusing out时，this.set('value',this.get('initial_value'))会根据需要设置初始值。

Twiddle for reference

Ember this.set 在组件中

Ember this.set in component

render

init

ember.js

ember-components