ember 组件增量/减量值

Question

我被组件 js 中的值递增和递减所困扰。我在我的模板中得到了这个：

<div class="circleBase" {{action 'upHeat' device.status}}> <p>  {{heat}} C </p> </div>

现在我只想在单击 div 时增加热值。我的组件如下所示：

    init() {
        console.log('init');
        this._super(...arguments);
        this.errors = [];
      },
      didRender() {
        this.setProperties({
          heat: 0
        });
      },
    actions: {
        upHeat: function(a){
            this.set('heat', this.heat +1)
            //or
            this.setProperties({
                heat: this.heat +1
              });
           console.log(heat);
        }
      }

这不起作用。每次我点击我的 div 时，热值都会增加但不会保存。我的模板仍然显示 0 作为值。

Answer 1

您已重置didRender() 中的值。

因此钩子将触发渲染，将值重置为0。

在didRender 中使用console.log(something) 可以查看每当单击div 时都会调用didRender 挂钩。

我根据您的要求创建了一个小玩意儿。请看一下。

https://ember-twiddle.com/5ef763cc77aec803f9d62ae85a15dbc1

Answer 2

你不应该在 Ember 中读取像 this.heat 这样的值，而是使用 this.get('heat')。所以这对你有用：

this.set('heat', this.get('heat') + 1);

如果你只是想增加一个属性，还有另一个例子，你可以像这样使用this.incrementProperty。

this.incrementProperty('heat');

您可以在API docs阅读。