The fact that JS and DOM are not reactive ie don’t support observables, creates a need for a DSL and a 3rd Party Library to polyfill this feature, and that’s what Handlebars and Ember etc. do

These libraries provide data binding (which is simply binding the data model to the DOM) by providing Observables ( variables with onChange handlers so that DOM can be updated by the library when they change) and Computed Properties (Calculations involving more than 1 Observable that need to be recalculated and reapplied to DOM when any observable changes)

Dirty Checking by Angular is better than Key Value Observation of Ember

var colours =['red','green','blue'];
document.getElementById('element').addEventListener('click',function(){// this is a reference to the element clicked onvar that =this;
colours.forEach(function(){// this is undefined// that is a reference to the element clicked on});});
_____
this in JavaScript always refers to current object, method of which was called. But sometimes you need to access this of your object in deeper. For example, in callbacks. Like so:

function MyClass() {
this.a = 10;
this.do = function() {
http.get(‘blablabla’, function(data) {
this.a = data.new_a;
});
};
}
It will not work, because this in callback may refer to http, to some dom element or just window(which is really common). So, it is common solution to define self or that, an alias for this or your object, so you can refer it anywhere inside.