ember组件增量/减量值

时间:2017-12-23 14:21:05

标签: javascript ember.js ember-cli

我坚持使用增量并减少组件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作为值。

2 个答案:

答案 0 :(得分:3)

您已重置didRender()中的值。

因此,钩子会触发渲染,将值重置为0

使用console.log(something)中的didRender查看每次点击didRender时都会调用div挂钩。

我根据你的要求创造了一个旋转。请看看。

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

答案 1 :(得分:2)

您永远不应在Ember中读取this.heat之类的值,而是使用this.get('heat')。所以这对你有用:

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

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

this.incrementProperty('heat');

您可以在API docs中阅读。