Ember Komponente Inkrementieren/Dekrementieren Wert

Ich bin mit Inkrement fest und dekrementiere einen Wert in einer Komponente js. Ich habe dies in meiner Vorlage:Ember Komponente Inkrementieren/Dekrementieren Wert

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

Vorerst Ich möchte nur den Wärmewert erhöht werden, wenn ich auf dem div bin klicken. Meine Komponente sieht wie folgt aus:

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); 
     } 
     }

Dies funktioniert nicht. Jedes Mal, wenn ich auf mein Div klicke, wird der Heizwert erhöht, aber nicht gespeichert. Meine Vorlage zeigt immer noch 0 als Wert an.

Quelle

2017-12-23 panx36

Sie sollten nie einen Wert wie this.heat in Ember lesen, stattdessen this.get('heat') verwenden. So würde dies würde für Sie:

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

Es ist ein weiteres Beispiel, wenn Sie nur wenn eine Eigenschaft erhöhen möchten, können Sie this.incrementProperty wie folgt verwenden.

this.incrementProperty('heat');

Sie können in der API docs lesen.

Quelle

2017-12-23 14:35:48

Ich habe versucht, Ihre Vorschläge, aber es ist immer noch nur den Wert in meiner Komponente js für diese Aktion Anruf erhöhen wie meine Versionen. Die Vorlage zeigt immer noch 0 an. – panx36

OP Bitte aktualisieren Sie Ihr Code-Snippet in der Frage, damit wir sehen können, was Sie versucht haben, und lassen Sie uns wissen, wenn Sie das getan haben. Außerdem benötigen Sie für den Anfangswert überhaupt keine didRender/setProperties. Wenn Sie möchten, dass der Anfangswert von Wärme 0 ist, können Sie einfach Wärme: 0 nur innerhalb der Komponente js Objekt boilerplate. – handlebears

Oh, jetzt sehe ich es, Sie setzen den Wert in 'didRender' auf 0 zurück. So wird Ihr Wert aktualisiert, was zu einem Rendern führt und nach dem Rendern wird das vaule auf 0 zurückgesetzt, so dass es erneut gerendert wird und den Wert entfernt. Wenn wir es tun, ohne dass es funktioniert. http://jsbin.com/yoeheut/edit?html,js,output –

Sie haben den Wert in didRender() zurückgesetzt.

Daher löst der Hook einen Rendervorgang aus, der den Wert auf 0 zurücksetzt.

Verwenden console.log(something) in didRender zu sehen, dass der Haken, wenn die didRenderdiv geklickt wird, aufgerufen wird.

Ich habe eine Twiddle mit Ihrer Anforderung erstellt. Bitte guck dir das an.

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

Quelle

2017-12-28 12:23:48 Bala

Ember Komponente Inkrementieren/Dekrementieren Wert

Antwort

Verwandte Themen