Ember.js Cookbook

Binding with element attributes and classes

A very useful feature of HTMLBars is binding elements to attributes in your HTML.

How to do it...

A very simple example would be binding an element to an img src tag.

1. In a new project, generate index template and index controller:

   $ ember g template index
   $ ember g controller index
   

   This will generate the files needed for this example.

2. Create a new index controller file with url, sideClass, and secondClass as its properties:

   // app/controllers/index.js
   import Ember from 'ember';
   export default Ember.Controller.extend({
     url: 'http://placehold.it/350x200',
     sideClass: 'cc',
     secondClass: 'dd'
     
   });

   We get the index route and controller without having to create a specific route for them. It works like the application ...