Question

我正在尝试为init生命周期挂钩中的某个组件分配默认值;如果从父组件传递未定义的值。最初一切似乎都按预期工作;然而，当我的组件被强制重新渲染时（可能通过父组件的另一个属性值更新）;父组件的未定义值将写回我的组件。

这意味着;我在初始化期间创建的值赋值没有反映到父组件，换句话说，双向绑定暂时不起作用（父组件和子组件的值不同步）。这是预期的行为还是我错过了......关于init事件的重要性？在哪里初始化组件的未定义值的适当位置？有关简单说明，请参阅twiddle。

Answer 1

好的，首先，一种解决方法是使用update上的attr功能。结帐this twiddle。

我将this.set('name', 'tom')替换为this.attrs.name.update('tom')中的.js，将{{name}}替换为{{attrs.name}}中的.hbs。

解决方法的另一种方法就是将Ember.run.later中的对象换成here，我用{{3}}代替this.set('name', 'tom')：

Ember.run.later(() => {
  this.set('name', 'tom');
});

这就是解决方法。

绑定未在init上完全设置的事实有很长的历史。但通常它是一个反模式来初始化子组件中的值并将该值提供给父组件。它使您的代码可读性降低，并且再次是 DDAU （数据向下，提升动作）原则。

我建议您在创建模型时显式初始化数据，而不是在组件评估周期中隐式显示。

对于您不想存储的默认值，我建议您编写计算属性：

nameWithDefault: computed('name', {
    get() {
        return get(this, 'name') || 'tom';
    },
    set(key, val) {
        set(this, 'name', val);
    }
})

这是明确的，不会在查看组件后写下数据，而是为用户工作。

Answer 2

我同意Lux的解决方案但是如果你想尝试别的东西，也许在你的子组件上你可以添加一个计算属性来检查名称或默认为另一个字符串。这允许您在不同的子模板上具有不同的默认值（假设您有不同的子组件使用相同的name属性）。

儿童component.js

export default Ember.Component.extend({
  child_name: Ember.computed('name', function() {
    return this.get('name') || 'tom';
  }),
});

儿童component.hbs

{{child_name}}
<br>
{{surname}}

在init的值赋值后，emberjs双向绑定暂时中断

2 个答案: