Stop Ember Time
Upcoming SlideShare
Loading in...5
×
 

Stop Ember Time

on

  • 1,152 views

 

Statistics

Views

Total Views
1,152
Views on SlideShare
654
Embed Views
498

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 498

http://www.scoop.it 497
https://hootsuite.scoop.it 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

Stop Ember Time Stop Ember Time Presentation Transcript

  • Stop! Ember Time! Wednesday, 9 October 13
  • Carl Woodward Wednesday, 9 October 13
  • @cjwoodward Wednesday, 9 October 13
  • Wednesday, 9 October 13
  • Wednesday, 9 October 13
  • Why Ember? Wednesday, 9 October 13
  • Wednesday, 9 October 13
  • Well structured Wednesday, 9 October 13
  • Data bound Wednesday, 9 October 13
  • Fast Wednesday, 9 October 13
  • Javascript MVC framework Wednesday, 9 October 13
  • Wednesday, 9 October 13
  • Route Model ControllerView Template User Wednesday, 9 October 13
  • Route Router Find a model Before model Wednesday, 9 October 13
  • WeightsProgram.ExerciseRoute  =  Ember.Route.extend    model:  (params)  -­‐>        WeightsProgram.Exercise.find  params["exercise_id"] * Using Ember Model Wednesday, 9 October 13
  • Controller Route Actions from UI Wednesday, 9 October 13
  • WeightsProgram.AuthenticatedExerciseController  =   Ember.ObjectController.extend    actions:        saveReps:  -­‐>            @get("content").set("current_max",   @get("content").get("new_max"))            @get("content").save()            @transitionToRoute("authenticated.week",   @get("content.week")) * Using Ember Model Wednesday, 9 October 13
  • View Controller Element events didInsertElement Wednesday, 9 October 13
  • WeightsProgram.AuthenticatedWeekView  =   Ember.View.extend() Wednesday, 9 October 13
  • Template View {{#link-to “week” week}}Week Link{{/link-to}} <form {{action "saveReps" on="submit"}}> <h3>{{movement.name}}</h3> Wednesday, 9 October 13
  • Templating Wednesday, 9 October 13
  • Handlebars or Emblem Wednesday, 9 October 13
  • if  isEditing    form.post-­‐form  role="form"  submit="create"        .form-­‐group            button.btn.btn-­‐primary  click="stopEditing"  View Emblem Wednesday, 9 October 13
  • <h2>Week  {{number}}</h2> <div  class="menu">    {{#each  exercise  in  exercises}}        <h3>            {{#link-­‐to  "authenticated.exercise"  exercise}}                {{exercise.movement.name}}            {{/link-­‐to}}        </h3>    {{/each}} </div> Handlebars Wednesday, 9 October 13
  • Application layout Wednesday, 9 October 13
  • <div  class="container  work">    <div  class="row">        <div  class="col-­‐sm-­‐12">            <h1>Strength  Program</h1>        </div>    </div>    <div  class="row">        <div  class="col-­‐sm-­‐12">            {{  outlet  }}        </div>    </div> </div> Handlebars Wednesday, 9 October 13
  • outlet is like yield in rails views {{outlet}} Wednesday, 9 October 13
  • Persistence Wednesday, 9 October 13
  • Ember Data or Ember Model Wednesday, 9 October 13
  • Ember Model = customisable Wednesday, 9 October 13
  • Wednesday, 9 October 13
  • WeightsProgram.Exercise  =  Ember.Model.extend    id:  Ember.attr()    reps:  Ember.attr()    initial_max_value:  Ember.attr()    movement:  Ember.belongsTo("WeightsProgram.Movement",   key:  "movement_id",  embedded:  false)    accessories:   Ember.hasMany("WeightsProgram.Accessory",  key:   "accessory_ids",  embedded:  false) WeightsProgram.Exercise.url  =  "/exercises" WeightsProgram.Exercise.adapter  =   Ember.RESTAdapter.create() WeightsProgram.Exercise.rootKey  =  "exercise" WeightsProgram.Exercise.collectionKey  =  "exercises" Ember Model Wednesday, 9 October 13
  • EmberBlog.Post  =  DS.Model.extend    title:  DS.attr("string")    publishedOn:  DS.attr("string")    body:  DS.attr("string") Ember Data Wednesday, 9 October 13
  • JJ Abrams Wednesday, 9 October 13
  • Tips Wednesday, 9 October 13
  • Don’t try and preload associations Wednesday, 9 October 13
  • didInsertView Wednesday, 9 October 13
  • model.on(“didCreateRecord”) Wednesday, 9 October 13
  • WeightsProgram.AuthenticatedProgramController  =   Ember.ObjectController.extend    actions:        createWeek:  -­‐>            number  =  @get("weeks.lastObject.number")  +  1            week  =  WeightsProgram.Week.create  program_id:   @get("id"),  number:  number            week.on  "didCreateRecord",  =>                @get("model").reload()                @transitionToRoute("authenticated.program",   @get("model"))            week.save() Ember Model Wednesday, 9 October 13
  • Computed Properties Wednesday, 9 October 13
  • Wednesday, 9 October 13
  • increase_percentage:  (-­‐>    @get("current_max")  /  @get("previous_max"))  -­‐  1 ).property("current_max",  "previous_max") Wednesday, 9 October 13
  • Include any attribute you need to create the model. E.g. program_id Wednesday, 9 October 13
  • Nested routes require nested names Wednesday, 9 October 13
  • WeightsProgram.AuthenticatedProgramController WeightsProgram.Router.map  -­‐>    @resource  "authenticated",  path:  "/",  -­‐>        @route  "program",  path:  "/programs/:program_id" WeightsProgram.AuthenticatedProgramView app/assets/javascripts/views/authenticated/program.hbs Wednesday, 9 October 13
  • Only use nested resources with nested outlets Wednesday, 9 October 13
  • Wednesday, 9 October 13
  • ember-rails works really well Wednesday, 9 October 13
  • jsbin Wednesday, 9 October 13
  • discuss.emberjs.com Read  discourse  source  code #emberjs-­‐dev Wednesday, 9 October 13
  • Demo Wednesday, 9 October 13