In Ember.js, routes and templates dictate the architecture of your app. This presentation will talk about why this is, and what tools Ember provides to manage architectural complexity.
22. •Re-usability as ui component
•re-usability as action
•If an action fires
•Where the action is handled
•The internals of preview
Thursday, September 19, 13
24. Architecture in Ember apps is
dictated by routes and templates.
Thursday, September 19, 13
25. Routes and templates decide how actions
propagate the controller/route tree, scope access
to dependencies, and are most subject to
external constraints.
Thursday, September 19, 13
26. Routes and templates decide how actions
propagate the controller/route tree, scope access
to dependencies, and are most subject to
external constraints.
Thursday, September 19, 13
27. Routes and templates decide how actions
propagate the controller/route tree, scope access
to dependencies, and are most subject to
external constraints.
Thursday, September 19, 13
28. Routes and templates decide how actions
propagate the controller/route tree, scope access
to dependencies, and are most subject to
external constraints.
Thursday, September 19, 13
29. Routes and templates decide how actions
propagate the controller/route tree, scope access
to dependencies, and are most subject to
external constraints.
Thursday, September 19, 13
32. WARNING
THEse slides describe the behavior IN rc8 and beyond.
behavior before the changes in rc8 is very similar to
what is described here, but not identical.
Thursday, September 19, 13
33. ACTION BUBBLING
1 var Actionable = Ember.Object.extend(Ember.ActionHandler);
2
3 var firstTarget = Actionable.create();
4
5 firstTarget.send("Wie Geht's");
6
7 // Nothing!
Thursday, September 19, 13
45. ACTIONS ON CONTROLLERS
•couples template to controller
•should not force use of NEEDs
ACTIONS ON routes
•have access to all controllers
•handled from any template on a page
Thursday, September 19, 13
47. Routes and templates decide how actions
propagate the controller/route tree, scope access
to dependencies, and are most subject to
external constraints.
Thursday, September 19, 13
48. 1 <div style="clear:both">
2 <div style="float:left">
3 {{input value=title}}
4 {{textarea value=body}}
5 </div>
6 <div style="float:left">
7 {{post-preview markdown=body viewName="preview"}}
8 </div>
9 </div>
10
11 <div style="clear:both">
12 <button style="float:left" {{action "preview" target=view.preview}}>Preview</button>
13 <button style="float:left" {{action "submit"}}>Submit</button>
14 </div>
setting viewName causes
a property named
“preview” to be added on
the parentview of that
view with it’s own
instance
that “preview” property
can be set as a target
Thursday, September 19, 13
49. •Components access nothing
•views access parentView, controller
•controllers access A target (the
route or a parent controller) AND
OTHER CONTROLLERS via needs
•routes access all controllers and
models
•CHEAT WITH REGISTER/INJECT
Thursday, September 19, 13
56. Clever Controller 1
1 App.BooksController = Ember.ArrayController.extend({
2 needs: ['library'],
3 content: Em.computed.alias('controllers.library.books')
4 });
assumption about library controller
Assumed to only be attached to a route (no item controller)
assumes books belong to a single library
Thursday, September 19, 13
57. LESS Clever Controller 1
1 App.BooksRoute = Ember.Route.extend({
2 model: function(){
3 this.modelFor('library').get('books')
4 }
5 });
6
7 // The Ember controller provided by convention is sufficient.
Thursday, September 19, 13