Basic value.bind binding in Todo tutorial is not working

Hello all. I am new to Aurelia and i have created a skeleton for Razor views in .NET Core 2.0, which you can find here if you’re interested: https://github.com/gordon-matt/aurelia-razor-netcore2-skeleton.

Anyway, I am trying to work through the “Todo List” tutorial from here: http://aurelia.io/docs/tutorials/creating-a-todo-app#the-todo-class

For some reason, it doesn’t seem to bind the value from the textbox. Surely I must be doing something stupid here, but I can’t for the life of me figure out what it is. Do I perhaps need to configure Aurelia to allow 2 way binding or something? I wouldn’t think so, but I’m not sure why this isn’t working. You can see the problem if you download my code and click on the “Todo List” link in the nav bar… trying to add items doesn’t work and if you open the console window, you will see where I am logging the value of the “todoDescription”, which is not being bound.

self = this; is wrong
and instead of self you should use this
self.todoDescription => this.todoDescription

I guess you are using typescript
so self is a property on the class and to get to it you’ll have to write this.self… which defeats the purpose (-:

Well, it looks like the problem was caused by me using the following:

self = this;

and then using self.todoDescription, etc instead of this.todoDescription.

Once I changed it back to using this instead, it all worked fine. I was using the self variable approach as a matter of habit from coding in Durandal/KnockoutJS to prevent various issues like trying to refer to the current this when inside a loop, for example. More info: https://stackoverflow.com/questions/17163248/whats-the-advantage-of-using-var-self-this-in-knockout-js-view-models

Why does this cause an issue in Aurelia and moreover, what do I do when I want to refer to the class itself when in a loop or other subfunction/closure?

ES6 has new arrow function syntax deliberatly to make “this” easier.

In the old days, we use
Option1, var self = this; to capture ref to “this”,
Or option2, (function () { this.foo ... }).bind(this) to enforce a func to bind current this.

In es6, () => { this.foo ... } not only make the syntax simpler, but also implicitly generate a func bound to “this”, essentially help you by using option 2 underneath.

Use arrow func syntax whenever possible, all nested arrow funcs can see exactly same “this” because of cascading effect.

Thanks. @Alexander-Taran - Just to clear up any confusion, my last response there was actually posted just a few minutes before yours, but it didn’t appear until now because I am a new user and a moderator had to approve it. Thanks for your response though.

@huochunpeng Thank you also for your response. I will try keep that in mind. I better start learning ES6!

Thanks again to both of you for your responses. Much appreciated.