EmberJS Tutorial: Two Way Data Binding

This is a continuation of my Ember Js Beginners’ Tutorial series. The previous ones cover what do you need before starting with ember, how to develop the first ember app, concept and description of views and controllers.

Now this article will deal with one of the best features frameworks like ember provides; that is data binding.

What is Data Binding?

Data binding is a technique to establish a binding or connection between the data reflected in UI and that present in your model, processed by business logic. Two way data binding is; if you change something in your model it will change the view accordingly and vice versa. Here model doesn’t refer to any separate or specific scope. Even if you are reflecting a property or variable of view in your template and in some point of time the value of the variable got changed; the changed value will be reflected automatically in your UI template.

The concept of data binding has almost removed the use of ‘print’ or ‘document.write’. Now you can easily get read of writing a function to print the new value again and again; you don’t have to take the overhead of managing your UI according to your model.

An examples: Basic understanding

Ember in VoidCanvas.comAs you can see, here in the above example same variable or property is used in the html template and also in javascript. Now, no matter whether you change that in your template (typing in the textbox) or in javascript (by clicking the button), in both the cases, the change is reflected to all the places, the property or variable is used. Through ember binding, you can bind properties of any scopes.

Binding in Different Ways

The previous example was the simplest form of data binding. But in ember allows inter controller and inter view binding also; both through javascript and handlebars.

Binding through HBS:

Ember in VoidCanvas.com
As you can see here, the controller has a property called ‘name’. The controller also has a view named ‘myView’, which I’m using in my template. I’ve binded the ‘name’ property of controller to the ‘myView’ through HBS. Now if you change the value of ‘name’ inside ‘myView’, it will be reflected to the controller too.

Binding through js:

Ember in VoidCanvas.com
Here you can see, just by adding the word ‘Binding’ right after the view property ‘name’ in the js, we can bind the two properties very easily. Here, the convention has become the binding syntax.


One way binding is, if something is changed in your model, it will be reflected to your template. But two way binding goes a step further. In this if you change the value from template, it will be reflected in your model too. Ember’s two way data binding is little more ahead of the conventional javascript or jQuery data binding approaches. It uses the few conventional syntax to bind data throughout the application and makes development very easy.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.