- An object that stores data (data persistance layer abstraction).
- Templates transforms models into HTML.
- Same thing as Rails model.
- Templates are written in Handlebars.
- Has a name (file name or
data-template-name attribute value of <script> element).
- Backed by a model and auto-updates following model changes.
- Can retrieve properties from Model and Controller.
- Can nest one another template with
{{outlet}} expression.
- Uses
text/x-handlebars type when defined in <script> blocks.
- Unnamed script block will be treated as
application (root) template.
<script type="text/x-handlebars">
<div>
{{outlet}}
</div>
</script>
- By default Ember will attach
application template to the document's body element.
- Root element could be changed during app creation:
App = Ember.Application.create({
rootElement: '#app'
});
- There are partial templates that can be included with
render Handlebars expression.
- Router recognizes URL, and passes it to a Route object.
- Translates URL into nested templates.
- Keep browser address line updated.
App.Router.map(function() {
this.resource('tasks', function() {
this.route('task', { path: '/:task_id' });
});
this.route('user');
this.route('project', { path: '/about' });
});
- Route sets up a Controller and supplies it with a Model.
- Tells model which template to show.
- Each route has controller and template with the same name.
- Routes can implement hooks.
model hook can specify what model will be represented to the template by controller.
App.FavoritesRoute = Ember.Route.extend({
model: function() {
return this.store.find('project');
}
});
- Using Ember Data is not mandatory. Model could be a plain JSON object:
App.UserRoute = Ember.Route.extend({
model: function(params) {
return {
first_name: "Eric",
last_name : "Sipple"
};
}
});
- Views are for Creating reusable components and Setting up logic to handle events.
- Can be used to handle browser events, and send the result to controller:
App.ProfilePhotoView = Ember.View.extend({
click: function(evt) {
this.get('controller').send('expandProfilePhoto');
}
});
App.UserController = Ember.ObjectController.extend({
actions: {
expandProfilePhoto: function() {
// Get the expanded picture and display it
}
}
});
- Controller provides Model data to the Template.
- Can be used to process Model data for the Template (calculated properties).
App.UserController = Ember.ObjectController.extend({
fullName: function() {
return this.get("first_name") + " " + this.get("last_name");
}
});
- May contain property and observer declarations (attention to get/set calls). Controller property monitors enumerated values and evaluate associated function. Observer executes their action respectively:
App.NumberController = Ember.ObjectController.extend({
number: 1,
timesTwo: function() {
return Number(this.get('number')) * 2;
}.property('number'),
fullName: function() {
// Calculate some value
return this.get("first_name") + " " + this.get("last_name");
}.property('first_name', 'last_name'),
nameChanged: function() {
// Execute some action
console.log("New name! New name!");
}.observes('first_name', 'last_name')
});
- Example above will make this template alive:
{{input type="text" value=number size="50"}} x2 = {{timesTwo}}
Sources: