FEATURES GUIDE •Use Computed Properties to create a new property synthesizing other properties. •Use Observers to react to changes in another property. •Use Bindings to ensure objects in two different layers are always in sync. Wednesday, October 3, 12
HANDLEBARS TEMPLATES • Placed in <br/>• Can be named (stored for later use), or unnamed (evaluate<br/>immediately in-line)<br/>• Deliberately limited semantics (supports auto-updating)<br/>Wednesday, October 3, 12<br/>
EMBER’S APPROACH “In general, Ember's goal is to eliminate explicit forms of asynchronous behavior. As we'll see later, this gives Ember the ability to coalesce multiple events that have the same result. It also provides a higher level of abstraction, eliminating the need to manually register and unregister event listeners to perform most common tasks.” Wednesday, October 3, 12
LOADING USER VIA AJAX <br/>Hello, {{App.user.fullName}}.<br/>Your username is: {{App.user.username}}.<br/> App.user = App.User.find("rubiety"); Wednesday, October 3, 12
ONLY DISPLAY IF LOADED App.user = App.User.find("rubiety"); <br/>{{#if App.user.isLoaded}}<br/>Hello, {{App.user.fullName}}.<br/>Your username is: {{App.user.username}}.<br/>{{else}}<br/>Loading user...<br/>{{/if}}<br/> Wednesday, October 3, 12
VIEWS & CONTROLLERS Higher-level constructs for MVC design You an do quite a lot just with auto-updating templates and Ember.Object, but Ember supports a wealth of higher-level components for complex UI engineering Wednesday, October 3, 12
MVC COMPONENTS • Model: Em.Object (or DS.Model) describes application structure, including relationships between models. • View: Em.View encapsulates templates and manages events. Usually corresponds to a named Handlebars.js template. • Controller: Mediate’s views access to model. • Em.ArrayController proxies to array data • Em.ObjectController proxies to a single object • State Manager: (Routers) Act as a map of your application and handle transitions as a user moves through it. Wednesday, October 3, 12
OTHER VIEW FEATURES (NOT COVERED) • Modifying a View’s HTML (Generated Tag) • Custom Handlebars Helpers • View Nesting / Hierarchy • Event propagation through View Hierarchy • {{action}} targeting another view or controller/router • View Components (Controls for Select, TextField, etc.) • ArrayProxy and Enumerable Wednesday, October 3, 12
router.get("applicationController").connectOutlet("users", App.User.all()); // The above line automatically does the following: // 1. New router.usersController with content = App.User.all(); router.usersController = App.UsersController.create({ content: App.User.all() }); // 2. New App.UsersView controller = router.usersController, context = controller var view = App.UsersView.create({ controller: router.usersController, context: controller }); // The view is rendered with the template (example below) // and inserted into {{outlet}} of ApplicationView: <br/><ul><br/>{{#each controller}}<br/><li>{{firstName}} {{lastName}}</li><br/>{{/each}}<br/></ul><br/> Wednesday, October 3, 12
OTHER ROUTER FEATURES (NOT COVERED) • Nested Routing • Routing with Named Parameters (/users/:user_id) • Serializing & Deserializing for State transition on # access • Wiring up view actions to router events (and state transitions) Wednesday, October 3, 12
EMBER STRENGTHS: • Scales well with complexity • Excellent strong object system throughout the library with robust data binding / dependency resolution • Robust View Hierarchy • Performant Event Delegation • Manages creating and destroying views efficiently for optimal memory management without leaks and phantom events • Excellent tools for complex UI engineering • Lean Templates with Handlebars.js Wednesday, October 3, 12
EMBER WEAKNESSES: • A little too much ceremony for simple apps • Poor Documentation, Few non-trivial example apps available • Concepts are Difficult • A fair amount of “magic” and auto-instantiation with Controllers / Routers • Template auto-updating only works with Handlebars.js • Pre-Version 1.0, so still a bit premature, but getting there • Ember ORM (ember-data) “not production ready” • Script tag “markers” in rendered markup, and Ember IDs Wednesday, October 3, 12
WHEN MIGHT YOU USE EMBER? • Complex applications with non-trivial nested UIs - Ember has hierarchical views and powerful state managers to make this easy • Applications with lots of data dependency/recalculation/re- rendering - Ember handles this very transparently WHEN TO NOT USE EMBER: • Applications with fairly simple views and minimal nesting / event handling Wednesday, October 3, 12