mercredi 13 avril 2016

How is the a value of this in ember.js computed property defined?

I am pretty new to ECMAScript 2015 and completely new to Ember. I am trying to understand why using function() inside a computed property works, but a fat arrow does not.

Here is a class I created, and two definitions of computed properties, one passing in function() {} (foo) , and the other passing in () => {} bar. I included both styles being passed into an array forEach() also for reference (foo1, and bar1).

Can someone explain what is going on in each of these four instances?

import Ember from 'ember';

const Light = Ember.Object.extend({
    isOn: false,
    color: 'red',

    foo: Ember.computed( 'isOn', 'color',  function() {
      console.log(`this in foo is ${this}`);
    }) , 
    foo1: [1].forEach(function() {
      console.log(`this in foo1 is ${this}`);
    }) ,
    bar: Ember.computed( 'isOn', 'color',  () => {
      console.log(`this in bar is ${this}`);
    }), 
    bar1: [1].forEach( () => {
      console.log(`this in bar1 is ${this}`);
    }) 

});

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',

  init() {
    this._super();
    this.set('bulb', Light.create());
  }

});

here is the template that references the all 4 properties

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<p> the bulb is {{bulb.isOn}} </p>
<p> the bulb is {{bulb.foo}} </p>
<p> the bulb is {{bulb.foo1}} </p>
<p> the bulb is {{bulb.bar}} </p>
<p> the bulb is {{bulb.bar1}} </p>

and here are the results printed to the console.

DEBUG: -------------------------------
VM66 ember.debug.js:6395 DEBUG: Ember      : 2.4.4
VM66 ember.debug.js:6395 DEBUG: Ember Data : 2.4.3
VM66 ember.debug.js:6395 DEBUG: jQuery     : 1.11.3
VM66 ember.debug.js:6395 DEBUG: -------------------------------
VM70 about:srcdoc:29 this in foo1 is undefined
VM70 about:srcdoc:35 this in bar1 is undefined
VM70 about:srcdoc:26 this in foo is <(unknown mixin):ember360>
VM70 about:srcdoc:32 this in bar is undefined

Here is the link to the twiddle http://ift.tt/1qqzPne




Aucun commentaire:

Enregistrer un commentaire