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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Ähnlich wie Stop Ember Time

Ähnlich wie Stop Ember Time (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Stop Ember Time