Introduction to EmberJSSmartLogic ConfAugust 30, 2012

Ember Components

• Router

• Controllers

• Views

• Templates

• Bindings

Ember Router

• State machine for your application

• URLs are states

• Actions are transitions

Router ExampleTodo.Router = Ember.Router.extend location: "none" root: Ember.Route.extend index: Ember.Route.extend route: "/" connectOutlets: (router) -> items = Todo.Item.find() router.get("applicationController"). connectOutlet("list", items) view: (router, event) -> router.transitionTo("show", event.context) show: Ember.Route.extend route: "/:item" connectOutlets: (router, item) -> router.get("applicationController").connectOutlet("item", item) back: (router, event) -> router.transitionTo("index")

Controllers

• Three stock flavors:

• Controller

• ObjectController

• ArrayController

• Wrap model data for views

• Provide context-specific behaviors

Controller Example

Z.RecentActivityController = Ember.ArrayController.extend content: (-> billPayments = @get("billPayments") or [] payments = @get("payments") or [] billPayments.toArray().slice(0, 10). concat(payments.toArray().slice(0,10)) ).property("billPayments.@each", "payments.@each") sortProperties: ["createdAt"]

Views

• Handles events seamlessly

• No need to manage event listeners!

• Comes with a few baked-in patterns:

• CollectionView

• ContainerView

• Cool 3rd party libs, like ember-bootstrap

View ExampleEmber.Checkbox = Ember.View.extend({ classNames: ['ember-checkbox'], tagName: 'input', attributeBindings: [ 'type', 'checked', 'disabled', 'tabindex' ], type: "checkbox", checked: false, disabled: false});

Templates

• Handlebars with Ember additions

• #view

• #outlet

• #action

• Quick and familiar way to compose views

Template Example

<script type="text/x-handlebars" data-template-name="list"> <ul> {{#each controller}} <li> <label> {{view Ember.Checkbox checkedBinding="done"}} {{name}} </label> </li> {{/each}} </ul> <button {{action add}}>Add Item</button></script>

DEMO

Thanks!