jcfrank/emberjs-sample.md

## emberjs-sample.md

      
    Raw
  

              emberjs-sample.md
            
          
    Simple Emberjs app

Backend

Dependencies:
  "dependencies": {
    "jade": "*",
    "coffee-script": "*",
    "express": "*",
    "body-parser": "*"
  }
app.coffee

Use express:
express = require 'express'
bodyParser = require 'body-parser'

app = express()

resType = 'application/json'

app.get '/', (req, res) ->
    res.type resType
    res.json {message: 'Hello Rest!'}
    this

app.get '/apis/members', (req, res) ->
    res.type resType
    res.json [
        {name: 'Frank', age: 32, desc: 'hacker'},
        {name: 'Donny', age: 28, desc: 'traveler'},
        {name: 'Fanny', age: 31, desc: 'artist'}
    ]
    this

app.get /^\/apis\/member\/(\d+)\/?$/, (req, res) ->
    res.type = resType
    req.params.id = Number(req.params[0])
    res.json {id: req.params.id, name: 'Dummy', age: 2}
    this

app.use bodyParser.json()
app.post /^\/apis\/member\/?$/, (req, res) ->
    res.type resType
    body = req.body
    res.json {id: 9979, name: body.name, age: body.age}
    this

app.use express.static(__dirname + '/public')
app.listen 3000
Frontend

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Ember App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.1/ember.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.js"></script>
    <script src="/js/emberapp.js"></script>
  </head>

  <body>
      <script type="text/x-handlebars", id="index">
          <div class="container">
              <h1>Hello Ember!</h1>
              <div>
                  <ul>
                      {{#each member in members}}
                      <li>ID: {{member.id}}, Name: {{member.name}}, Age: {{member.age}}</li>
                      {{/each}}
                  </ul>
              </div>
              <div>
                  {{#if member}}
                  <span>ID: {{member.id}}, name: {{member.name}}, age: {{member.age}}</span>
                  {{/if}}
              </div>
              <div>
                  <button {{action 'getMembers'}}>list members</button>
                  <button {{action 'getOneMember'}}>get one member</button>
                  <button {{action 'createOneMember'}}>create one member</button>
              </div>
          </div>
      </script>
  </body>
</html>
emberapp.coffee

Ember's controller is only a decoration layer of model.

Basicaly, one controller correspond to one route and one model.

Also, it uses a lot of naming convention. So IndexController needs a <script type="text/x-handlebars", id="index">.
'use strict'

app = window.EmberApp = Ember.Application.create()
app.Router.map( ->
    this.resource('index', {path: '/'})
)

app.IndexRoute = Ember.Route.extend({
    model: ->
        {members: [], member: null}
})

app.IndexController = Ember.ObjectController.extend({
    actions: {
        getMembers: ->
            caller = this
            Ember.$.getJSON('/apis/members', (data) ->
                caller.set('members', data)
                return
            )
            return
        ,
        getOneMember: ->
            caller = this
            Ember.$.getJSON('/apis/member/1234', (data) ->
                caller.set('member', data)
                return
            )
            return
        ,
        createOneMember: ->
            caller = this
            Ember.$.ajax({
                type: 'POST',
                url: '/apis/member',
                data: JSON.stringify({name: "Wennie", age: 123}),
                contentType: 'application/json'
                })
            .done((data) ->
                caller.set('member', data)
                return)
            return
    }
})