Meteor - Arrow Functions breaking #each loop in ES6

Question

I'm hoping I got the right area to ask for this... Below is some code from two files I'm working on. When I change anything with 'this.' in the function to an arrow function, the code no longer functions as expected.

Is someone able to explain what I'm doing wrong? Do I need to do something differently when using arrow functions? Am I using 'this.' incorrectly to begin with? Should I not be using arrow functions in this way?

Help is greatly appreciated.

client/views/jobList.html

{{#each jobs}}
    <tr>
        <td>{{jobID}}</td>
            <td>{{user.fullname}}</td>
            <td>{{product.type}}</td>
            <td>{{shortDesc}}</td>
            <td>{{formattedDate}}</td>
            <td>{{phone}}</td>
            <td>{{user.username}}</td>
            <td>{{jobType}}</td>
            <td>{{product.brand}}</td>
            <td>{{product.type}}</td>
            <td>{{product.model}}</td>
        </tr>
    {{/each}}

client/views/jobList.js

Template.jobList.helpers({
    jobs: ()=> Jobs.find({}, {sort: {jobDate: 1}}),

    formattedDate: function() { // Changing this to arrow function breaks functionality
        let d = this.jobDate;
        let e = formatDate(d);
        return e;
    },
    shortDesc: function () { // Changing this to arrow function breaks functionality
        if (this.description.length > 40) {
            return this.description.substr(0, 50) + '...';
        } else {
            return this.description
        }
    },
    jobID: function () { // Changing this to arrow function breaks functionality
        let a = this.jobNum;
        let e = this.jobType.substr(0, 1);
        return e + a
    }
});

Please, show us your arrow function that does not work? Best way for us to tell you if it is correct ;) — Salketer, Jun 13 '16 at 08:15
if I change any of the methods which contain `this` in the helper to an arrow function....Edited it in — jERCle, Jun 13 '16 at 08:18

T.J. Crowder · Accepted Answer · 2016-06-13T08:22:24.483

3

One of the fundamental things about arrow functions is that they inherit (close over) the this in the context in which they're created. Your code relies on this being set by the way the function is called, so arrow functions aren't a good choice there.

Here's an illustration of the difference and the problem:

var obj = {
    foo: () => {
        console.log("foo: this.prop:", this.prop);
    },
    bar: function() {
        console.log("bar: this.prop:", this.prop);
    },
    prop: "the property"
};
obj.foo(); // Doesn't show `prop` because `this` != `obj`
obj.bar(); // Does show `prop` because `this` == `obj`

edited Jun 13 '16 at 08:22

answered Jun 13 '16 at 08:18

T.J. Crowder

1,031,962
187
1,923
1,875

Ok that's along the lines of what I was starting to think. So, in these instances I should just use the standard function declaration? – jERCle Jun 13 '16 at 08:21
1

Thanks! Much appreciated :) – jERCle Jun 13 '16 at 08:24
@jERCle: Those aren't function declarations (they're function *expressions*), but yes, use a standard (non-arrow) functions. You can make them more concise if you like by using method syntax in your object initializer (which is another new thing in ES2015): http://pastie.org/10874562. – T.J. Crowder Jun 13 '16 at 08:24
Oh yes, my mistake. Still new to this. Thank you, I didn't think of using that syntax at all. – jERCle Jun 13 '16 at 08:30
@jERCle: Hey, it's brand-new, not surprising not to think of it. :-) – T.J. Crowder Jun 13 '16 at 08:36
I think it may have come out before I started coding. I only started learning near the end of last year. However, I haven't really got into ES6 as much as I'd like yet. I'll get there in the end. Thank you again :) – jERCle Jun 13 '16 at 08:40

Meteor - Arrow Functions breaking #each loop in ES6

1 Answers1