Ember - 组件属性未在模板 hbs 中更新

Posted 2023-02-23

【中文标题】Ember - 组件属性未在模板 hbs 中更新

【英文标题】：Ember - Component property is not getting updated in template hbs

【发布时间】：2020-01-01 08:39:51

【问题描述】：

我的 component.js 中有一个组件属性，基于该属性我将在 template.hbs

中显示/隐藏一些数据

案例1： 默认情况下，componentProperty (canShow) 为 true，但根据数据的一些变化，它会在另一个 computed property 中设置为 false。

        dataChanged: computed( 'data', 'canShow', function () 
             let someCalc = doSomeCalc;
             if(someCalc !== 0)  
                this.set('canShow', false);
             
            return someCalc;
        );

预期：Canshow 应该是假的，所以模板中的数据应该被隐藏 结果：它被更新为假，但在模板中数据仍在显示

案例2： 我已经在计算中使用 getter 和 setter 进行了尝试。

    canShowTemplateData: computed('canShow', 
       get() 
          return this.get('canShow');
        ,
        set(key, value) 
          return value;
        
    );

即使在这种情况下，set 也能正常工作。但是使用 get() 函数在模板中根本没有更新该值。另外请在使用 set() 时澄清一下，哪个值应该更新canShow 或canShowTemplateData？

我错过了什么吗？或者有没有其他方法可以解决这个问题？

【参考方案1】：

首先，计算属性不应该有副作用。所以永远不要在计算属性中调用this.set，或者做类似this.foo = ...的事情。

您的第一个计算属性也有问题：它从不返回任何内容。

您使用 setter 的第二个示例没有意义。你的 setter 并没有真正做任何事情。

你想要的大概是这样的：

    canShow: computed( 'data', function () 
        if(it is true)  
            return false;
         else 
            return true;
        
    );

【讨论】：

Case1 将返回一个计算值。忘记加了，现在加了。我还根据建议更改了计算属性并得到了解决方案。谢谢:)