• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to Ember
 

Introduction to Ember

on

  • 961 views

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

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

Statistics

Views

Total Views
961
Views on SlideShare
961
Embed Views
0

Actions

Likes
0
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to Ember Introduction to Ember Presentation Transcript

    • 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 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 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"]
    • 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!