Stop Ember Time

Stop! Ember Time!

Wednesday, 9 October 13

Carl Woodward


@cjwoodward




Why Ember?



Well structured


Data bound


Fast


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 eventsdidInsertElement


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


Handlebarsor

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 Dataor

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


Tips


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


jsbin


discuss.emberjs.com

Read discourse source code

#emberjs-‐dev


Demo


Technology

Stop Ember Time