Understanding

As a Rails developer

Why client side JS frameworks?

●Rich user experience●Persistence

●Best practices●Much more..

Why ember...

Core Concepts

●Templates●Views

●Models●Controller●Router

Templates

● Expressions, {{firstName}}

● Outlets, {{outlet}}

● Views, {{view}}

Views

{{view Ember.TextField valueBinding='name' name='name'viewName='nameField'}}

Controllers

App.TodosNewController = Ember.ObjectController.extendsave: ->

@content.save().then =>@transitionToRoute 'todos.index'

buttonTitle: 'Create'

app/assets/javascripts/controllers/todos/newController.coffee

Models

App.Todo = DS.Model.extend(name: DS.attr('string'')

task: (->"#{@get('nam

e')}").property('name'))

DS.RESTAdapter

RouterApp.Router.map ->

@resource 'todos', ->@route 'new'

App.IndexRoute = Ember.Route.extendsetupController: (controller, model) ->

@controllerFor('application')

Naming conventionsWhen your application boots, Ember will look for theseobjects:

App.ApplicationRouteApp.ApplicationControllerthe application template

How it flows..

App.ApplicationRoute = Ember.Route.extend({setupController: function(controller) {

// `controller` is the instance of ApplicationControllercontroller.set('title', "Hello world!");

}});

#router

App.ApplicationController = Ember.Controller.extend({appName: 'My First Example'

});#controller

<!-- application template --><h1>{{appName}}</h1>

<h2>{{title}}</h2>#template (hbs)

Demo

Demo

Thanks

● http://emberjs.com/● http://reefpoints.dockyard.com/ember/2013/01/07/building-an-ember-app-with-rails-api-part-1.html

● http://railscasts.com/● http://blog.dcxn.com/2013/03/23/getting-started-with-ember-js-on-rails/● http://www.cerebris.com/blog/2012/01/24/beginning-ember-js-on-rails-part-1/

Google.com