How valueBinding works in Ember?

Question

Honestly i didn't find much helpful guides on emberjs.com about valueBindings.

//login_route.js

    App.LoginRoute = Ember.Route.extend({
        model: function() {
            return Ember.Object.create();
        }
    });

Basically here i'm creating empty JS object to be model for login template.
//login.hbs

  ...
  {{view Em.TextField valueBinding="email" id="email"}}
  {{view Ember.TextField valueBinding="password" type="password" id="password"}}
  ...

So when user start to type user&pass, behind the scenes, Ember will crate 2 properties named "email" and "password" and 'append' them to context(model) of the current template and properties will be constantly updated till user hit login button ?

I can guess that is correct because i can do simple debug inside template: {{ email }} (which is equal to {{ controller.email }} which again is equal to {{ controller.model.email }})?

Kingpin2k Kingpin2k · Accepted Answer · 2014-03-31T18:52:24

valueBinding essentially is telling Ember to bind the property named password to the internal property in Ember.TextField named value.

additionally you can just bind it to the property, like so

{{view Em.TextField value=email id="email"}}

http://emberjs.jsbin.com/xujugayo/1/edit

Now the reason that

{{ controller.email }} is equal to {{ controller.model.email }} because the controller backing your template is an ObjectController. The ObjectController is a proxy object, meaning it will proxy properties from the model that's backing it, as if they were on the controller.

How valueBinding works in Ember?

1 Answers