Introduction to    EmberJS   SmartLogic Conf   August 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  ...
Controllers• Three stock flavors: • Controller • ObjectController • ArrayController• Wrap model data for views• Provide con...
Controller ExampleZ.RecentActivityController = Ember.ArrayController.extend  content: (->    billPayments = @get("billPaym...
Views• Handles events seamlessly • No need to manage event listeners!• Comes with a few baked-in patterns: • CollectionVie...
View ExampleEmber.Checkbox = Ember.View.extend({  classNames: [ember-checkbox],  tagName: input,  attributeBindings: [    ...
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>      ...
DEMO
Thanks!
Upcoming SlideShare
Loading in …5
×

Introduction to Ember

994 views

Published on

Sam Goldman's intro to Ember, which helps developers build the same product, with less code.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
994
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Ember

  1. 1. Introduction to EmberJS SmartLogic Conf August 30, 2012
  2. 2. Ember Components• Router• Controllers• Views• Templates• Bindings
  3. 3. Ember Router• State machine for your application • URLs are states • Actions are transitions
  4. 4. 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")
  5. 5. Controllers• Three stock flavors: • Controller • ObjectController • ArrayController• Wrap model data for views• Provide context-specific behaviors
  6. 6. Controller ExampleZ.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"]
  7. 7. 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
  8. 8. View ExampleEmber.Checkbox = Ember.View.extend({ classNames: [ember-checkbox], tagName: input, attributeBindings: [ type, checked, disabled, tabindex ], type: "checkbox", checked: false, disabled: false});
  9. 9. Templates• Handlebars with Ember additions • #view • #outlet • #action• Quick and familiar way to compose views
  10. 10. 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>
  11. 11. DEMO
  12. 12. Thanks!

×