Ember.js is a front end JavaScript MVC framework, but probably won't map to the exact same MVC patterns as CakePHP does on the server side. I cover the major features of Ember.js and attempt to make the connection to CakePHP classes where it applies.
12. TEMPLATES FILES
Integrate into build step and compile server side
// webroot/templates/projects/add.hbs
<form {{action save on="submit"}}>
<label>Project Name</label>
{{input type="text" value=name}}
<input type="submit" value="Save">
</form>
Gets compiled with a build tool in development, and as
part of a production build step to:
Ember.TEMPLATES['projects/add'] = // compiled template function
13. BUILT IN HELPERS
<div class="posts">
{{#each post in controller}}
{{#if post.isPublished}}
<h2>{{#link-to 'post' post}} {{post.title}} {{/link-to}}</h2>
{{/if}}
{{else}}
<p>{{#link-to 'posts.new'}}Create the first post{{/link-to}}
{{/each}}
</p></div>
And many more
24. OTHER CALLBACKS
App.ConferenceRoute = Ember.Route.extend({
model: function(params) {
// Return data for the template
},
setupController: function(controller, model) {
// Receives instance of this controller and
// the return value from model hook
},
renderTemplate: function() {
// Render template manually if you need to do
// something unconventional
}
});
26. Controllers are long lived in Ember*,
and are the default context for templates.
27. CONTROLLER
Decorates a model, but has no special proxying behavior.
App.ApplicationController = Ember.Controller.extend({
search: '',
query: function() {
var query = this.get('search');
this.transitionToRoute('search', { query: query });
}
});
28. OBJECT CONTROLLER
Acts like an object and proxies to the modelproperty.
// In route class (this is the default behavior)
setupController: function(controller, model) {
controller.set('model', model);
}
// Object Controller
App.ConferenceController = Ember.ObjectController.extend({
isEven: function() {
return this.get('name').length % 2 === 0;
}.property('name')
});
isEvencalls this.get('name')which proxies to
this.get('model.name')
29. ARRAY CONTROLLER
Acts like an array, but actually performs on the methods
on the modelproperty.
App.ConferencesController = Ember.ArrayController.extend({
sortProperties: ['title']
});
// conferences template
{{#each conf in controller}}
<div>
<h1>{{conf.title}}</h1>
</div>
{{/each}}
Looping over controllerin a template is actually
looping over the modelproperty*
31. Views are primarily used to handle browser events. Since
many application actions can be handled with the action
helper and controller methods, you'll often not define
views.
33. SETTING VIEWS TAG
In the DOM, your templates are wrapped by a divwith a
special id that Ember knows about.
App.ConferenceView = Ember.View.extend({
tagName: 'section',
});
The element wrapping the template will now be a
section
