Stop! Ember Time!

Transcript

1. Stop! Ember Time! Wednesday, 9 October 13
2. Carl Woodward Wednesday, 9 October 13
3. @cjwoodward Wednesday, 9 October 13
4. Wednesday, 9 October 13
5. Wednesday, 9 October 13
6. Why Ember? Wednesday, 9 October 13
7. Wednesday, 9 October 13
8. Well structured Wednesday, 9 October 13
9. Data bound Wednesday, 9 October 13
10. Fast Wednesday, 9 October 13
11. Javascript MVC framework Wednesday, 9 October 13
12. Wednesday, 9 October 13
13. Route Model Controller View Template User Wednesday, 9 October 13
14. Route Router Find a model Before model Wednesday, 9 October 13
15. WeightsProgram.ExerciseRoute  =  Ember.Route.extend    model:  (params)  -­‐>        WeightsProgram.Exercise.find  params["exercise_id"] * Using Ember Model Wednesday, 9 October 13
16. Controller Route Actions from UI Wednesday, 9 October 13
17. 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
18. View Controller Element events didInsertElement Wednesday, 9 October 13
19. WeightsProgram.AuthenticatedWeekView  =   Ember.View.extend() Wednesday, 9 October 13
20. Template View {{#link-to “week” week}}Week Link{{/link-to}} <form {{action "saveReps" on="submit"}}> <h3>{{movement.name}}</h3> Wednesday, 9 October 13
21. Templating Wednesday, 9 October 13
22. Handlebars or Emblem Wednesday, 9 October 13
23. if  isEditing    form.post-­‐form  role="form"  submit="create"        .form-­‐group            button.btn.btn-­‐primary  click="stopEditing"  View Emblem Wednesday, 9 October 13
24. <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
25. Application layout Wednesday, 9 October 13
26. <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
27. outlet is like yield in rails views {{outlet}} Wednesday, 9 October 13
28. Persistence Wednesday, 9 October 13
29. Ember Data or Ember Model Wednesday, 9 October 13
30. Ember Model = customisable Wednesday, 9 October 13
31. Wednesday, 9 October 13
32. 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
33. EmberBlog.Post  =  DS.Model.extend    title:  DS.attr("string")    publishedOn:  DS.attr("string")    body:  DS.attr("string") Ember Data Wednesday, 9 October 13
34. JJ Abrams Wednesday, 9 October 13
35. Tips Wednesday, 9 October 13
36. Don’t try and preload associations Wednesday, 9 October 13
37. didInsertView Wednesday, 9 October 13
38. model.on(“didCreateRecord”) Wednesday, 9 October 13
39. 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
40. Computed Properties Wednesday, 9 October 13
41. Wednesday, 9 October 13
42. increase_percentage:  (-­‐>    @get("current_max")  /  @get("previous_max"))  -­‐  1 ).property("current_max",  "previous_max") Wednesday, 9 October 13
43. Include any attribute you need to create the model. E.g. program_id Wednesday, 9 October 13
44. Nested routes require nested names Wednesday, 9 October 13
45. 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
46. Only use nested resources with nested outlets Wednesday, 9 October 13
47. Wednesday, 9 October 13
48. ember-rails works really well Wednesday, 9 October 13
49. jsbin Wednesday, 9 October 13
50. discuss.emberjs.com Read  discourse  source  code #emberjs-­‐dev Wednesday, 9 October 13
51. Demo Wednesday, 9 October 13