emberjs + rails3.2 handson

Todos.todosController = Em.ArrayProxy.create content: [] createTodo: (title) -> todo = Todos.Todo.create(title: title) @pushObject(todo) Todos.CreateTodoView = Em.TextField.extend insertNewline: -> value = @get('value') if value Todos.todosController.createTodo(value) @set('value','')

Todos.Todo = DS.Model.extend title: DS.attr 'string' isDone: DS.attr 'boolean' Todos.Todo.reopenClass url: "todo" Todos.store = DS.Store.create adapter: DS.RESTAdapter.create bulkCommit: false revision: 4

rails new ember -d postgresql
echo "gem 'emberjs-rails'" >> Gemfile
bundle
rails g scaffold todo title done:boolean
rake db:create:all
rake db:migrate

application.js 에 엠버추가

//= require jquery
//= require jquery_ujs
//= require ember
//= require_tree .

app/views/todos/index.html.erb에 추가

<hr />

<script type="text/x-handlebars" charset="utf-8">
  {{view Em.TextField id="new-todo" placeholder="뭘해야하는데?"}}
</script>

서버를 켜봅시다. 인스팩터로 만들어진 엘리먼트를 확인

이제 실제 컨트롤러에 붙여 봅시다.

<script type="text/x-handlebars" charset="utf-8">
  {{view Todos.CreateTodoView id="new-todo" placeholder="뭘해야하는데?"}}
</script>

app/assets/javascripts/todos.js.coffee에 다음코드를 작성

Todos = Ember.Application.create()

window.Todos = Todos

Todos.CreateTodoView = Em.TextField.extend
  insertNewline: ->
    value = @get('value')
    alert(value)

이제 브라우저로 가보면 입력한 내용이 얼렛으로 나오는걸 확인 할 수 있습니다.

app/assets/javascripts/todos.js.coffee를 수정

Todos.todosController = Em.ArrayProxy.create
  content: []
  createTodo: (title) ->
    todo = Todos.Todo.create(title: title)
    @pushObject(todo)

Todos.CreateTodoView = Em.TextField.extend
  insertNewline: ->
    value = @get('value')
    if value
      Todos.todosController.createTodo(value)
      @set('value','')

입력창에 아무거나 입력해 본 다음에 콘솔을 열어서

Todos.todosController.content

오브젝트가 있는걸 확인했으면 핸들바 구문에 다음내용을 추가하면 데이터가 쌓이는걸 트래킹 할수있음.

  {{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
    {{view Em.Checkbox titleBinding="content.title"}}
  {{/collection}}

하지만 서버사이드와 데이터를 연동하려면 어떻게 해야할까?

application.js 에 ember-data 를 추가

//= require ember-data

모델을 변경

Todos.Todo = DS.Model.extend
  title: DS.attr 'string'
  isDone: DS.attr 'boolean'
Todos.Todo.reopenClass
  url: "todo"

Todos.store = DS.Store.create
  adapter: DS.RESTAdapter.create
    bulkCommit: false
  revision: 4

컨트롤러를 변경

Todos.todosController = Em.ArrayProxy.create
  content: Todos.store.findAll(Todos.Todo)
  createTodo: (title) ->
    Todos.store.createRecord(Todos.Todo, title: title)
    Todos.store.commit()

일단 이걸로 움직여야 하지만 레일즈의 json형식이 엠버에서 원하는 모양과 달라서 재대로 안나올겁니다.

여기는 강행 돌파

gem 설치

gem 'active_model_serializers'

레일즈의 모델을 변경합니다

class TodoSerializer < ActiveModel::Serializer
  attributes :id, :done, :title
end

class Todo < ActiveRecord::Base
  attr_accessible :done, :title
end

이제 브라우져에서 확인해봅시다 'ㅅ'/

marocchino/handson.jp.md

Ref

Ref