A very useful feature of HTMLBars is binding elements to attributes in your HTML.
A very simple example would be binding an element to an img src
tag.
In a new project, generate
index template
andindex controller
:$ ember g template index $ ember g controller index
This will generate the files needed for this example.
Create a new
index controller
file withurl
,sideClass
, andsecondClass
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 route, which all other routes inherit from.Create a new template and add an
img
tag. Theurl
element will be displayed:// app/templates/index.hbs <img src="{{url}}"/>
This will be rendered as if the
url
property is in thesrc
attribute...