Stop Ember Time

Stop! Ember Time!
Wednesday, 9 October 13

Carl Woodward

@cjwoodward

Why Ember?

Well structured

Data bound

Javascript MVC
framework

Route
Model
ControllerView
Template
User

Route
Router
Find a model
Before model

WeightsProgram.ExerciseRoute
=
Ember.Route.extend

model:
(params)
-‐>

WeightsProgram.Exercise.find
params["exercise_id"]
* Using Ember Model

Controller
Route
Actions from UI

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

View
Controller
Element events
didInsertElement

WeightsProgram.AuthenticatedWeekView
=

Ember.View.extend()

Template
View
{{#link-to “week” week}}Week Link{{/link-to}}
<form {{action "saveReps" on="submit"}}>
<h3>{{movement.name}}</h3>

Templating

Handlebars
or
Emblem

if
isEditing

form.post-‐form
role="form"
submit="create"

.form-‐group

button.btn.btn-‐primary
click="stopEditing"
View
Emblem

<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

Application layout

<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

outlet is like yield in
rails views
{{outlet}}

Persistence

Ember Data
or
Ember Model

Ember Model =
customisable

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

EmberBlog.Post
=
DS.Model.extend

title:
DS.attr("string")

publishedOn:
DS.attr("string")

body:
DS.attr("string")
Ember Data

JJ Abrams

Don’t try and preload
associations

didInsertView

model.on(“didCreateRecord”)

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

Computed Properties

increase_percentage:
(-‐>

@get("current_max")
/
@get("previous_max"))
-‐
1
).property("current_max",
"previous_max")

Include any attribute you
need to create the model.
E.g. program_id

Nested routes require nested
names

WeightsProgram.AuthenticatedProgramController
WeightsProgram.Router.map
-‐>

@resource
"authenticated",
path:
"/",
-‐>

@route
"program",
path:
"/programs/:program_id"
WeightsProgram.AuthenticatedProgramView
app/assets/javascripts/views/authenticated/program.hbs

Only use nested resources
with nested outlets

ember-rails works really
well

discuss.emberjs.com
Read
discourse
source
code
#emberjs-‐dev

Stop Ember Time

More Related Content

What's hot (6)

Similar to Stop Ember Time (9)

Recently uploaded (20)

Stop Ember Time