AngularJs vs EmberJs

Two-way binding in EmberJs


    <button {{action 'someAction'}}>Exclaim harder</button>
    {{input type="text' value=someProperty}}

Two-way binding in EmberJs works in a very similar fashion to the way it works in AngularJs - so we will only cover the differences.

The contents of the <p> tag get bound and behave as expected. However, element attributes are problematic - we cannot bind any model values to DOM element attributes using the usual squiggly bracket syntax. The reason for this is that EmberJs inserts <script> tags - one before and one after - each bound section of the template; and of while this works well outside of elements, it does not work too well for attributes.

We need to use the {{bind-attr}} Handlebars helper instead. As this is a very common use case for <input> tags, there is an {{input}} Handlebars helper that does this for us.

The implication of this is that getting two-way binding to work in EmberJs can be more complicated, as there is more syntax to learn.