Stop Ember Time
-
date post
21-Oct-2014 -
Category
Technology
-
view
1.225 -
download
0
description
Transcript of Stop Ember Time
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 eventsdidInsertElement
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
Handlebarsor
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 Dataor
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