Skip to content

Instantly share code, notes, and snippets.

@zikolach

zikolach/jsbin.OtOyUYi.coffee

Created September 27, 2013 09:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zikolach/6725976 to your computer and use it in GitHub Desktop.
Save zikolach/6725976 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.OtOyUYi.coffee
App = Ember.Application.create()
App.Router.map ->
this.resource 'users', ->
this.resource 'user', { path: '/:user_id' }, ->
this.route 'edit'
this.route 'new'
this.resource 'posts', ->
this.resource 'post', { path: '/:post_id' }, ->
this.route 'edit'
this.route 'new'
App.ApplicationAdapter = DS.FixtureAdapter.extend()
App.User = DS.Model.extend
name: DS.attr 'string'
posts: DS.hasMany 'post',
async: true
App.User.FIXTURES = [
{ id: '1', name: 'Ted', posts: ['1'] }
{ id: '2', name: 'Berry', posts: ['2', '3'] }
]
App.Post = DS.Model.extend
name: DS.attr 'string'
author: DS.belongsTo 'user'
App.Post.FIXTURES = [
{ id: '1', name: 'Post 1', author: '1' }
{ id: '2', name: 'Post 2', author: '2' }
{ id: '3', name: 'Post 3', author: '2' }
]
App.UsersRoute = Ember.Route.extend
model: -> this.store.find('user')
App.UsersNewController = Ember.Controller.extend
name: 'new user'
actions:
create: ->
self = this
user = self.store.createRecord('user', self.getProperties(['name']))
user.save().then (user) ->
console.log 'User ' + user.get('id') + ' was successfully created'
self.transitionToRoute 'user', user
App.UserRoute = Ember.Route.extend
model: (params) -> this.store.find('user', params.user_id)
App.PostsRoute = Ember.Route.extend
model: -> this.store.find('post')
App.PostsNewRoute = Ember.Route.extend
setupController: (controller) ->
this.store.find('user').then (users) ->
controller.set 'users', users
App.PostsNewController = Ember.Controller.extend
name: 'new post'
author: null
actions:
create: ->
self = this
self.store.createRecord('post', self.getProperties(['name', 'author'])).save().then (post)->
author = post.get('author')
author.get('posts').then (posts) ->
posts.pushObject(post)
posts.save().then ->
console.log 'success'
self.transitionToRoute 'post', post
App.PostController = Ember.ObjectController.extend
actions:
delete: (post) ->
self = this
this.store.deleteRecord(post)
post.save(post).then ->
self.transitionToRoute 'posts'
App.PostEditRoute = Ember.Route.extend
setupController: (controller) ->
this.store.find('user').then (users) ->
controller.set 'users', users
App.PostEditController = Ember.Controller.extend
needs: ['post']
postBinding: Ember.Binding.oneWay('controllers.post.model')
nameBinding: Ember.Binding.oneWay('controllers.post.name')
authorBinding: Ember.Binding.oneWay('controllers.post.author')
actions:
edit: (post)->
self = this
newAuthor = this.get('author')
oldAuthor = post.get('author')
post.setProperties(this.getProperties(['name', 'author']))
post.save().then (post)->
oldAuthor.get('posts').then (posts) ->
posts.removeRecord(post)
posts.save()
newAuthor.get('posts').then (posts) ->
posts.pushObject(post)
posts.save()
Raw
jsbin.OtOyUYi.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h1>Ember Data</h1>
{{#linkTo 'users'}}Users{{/linkTo}}
{{#linkTo 'posts'}}Posts{{/linkTo}}
<hr/>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Content:</h2>
</script>
<script type="text/x-handlebars" data-template-name="users">
<h2>Users:</h2>
{{#linkTo "users.new"}}New user{{/linkTo}}
<nl>
{{#each}}
<li>{{#linkTo "user" id}} {{name}} {{/linkTo}}</li>
{{/each}}
</nl>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="users/new">
<h2>New user:</h2>
{{input value=name}}
<button {{action "create"}}>Save</button>
</script>
<script type="text/x-handlebars" data-template-name="user">
<h2>User: {{name}}</h2>
<ul>
{{#each posts}}
<li>{{#linkTo "post" id}} {{name}} {{/linkTo}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="posts">
<h2>Posts:</h2>
{{#linkTo "posts.new"}}New post{{/linkTo}}
<nl>
{{#each}}
<li> {{#linkTo "post" id}} {{name}} {{/linkTo}}</li>
{{/each}}
</nl>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="posts/new">
<h2>New post:</h2>
{{input value=name}}
{{view Ember.Select
contentBinding="users"
optionLabelPath="content.name"
optionValuePath="content.id"
prompt="Pick a user:"
selectionBinding="author"}}
<button {{action "create"}}>Save</button>
</script>
<script type="text/x-handlebars" data-template-name="post">
<h2>Post: {{name}}</h2>
Author: {{#linkTo "user" author.id}} {{author.name}} {{/linkTo}}
<hr/>
{{#linkTo "post.edit" model}}Edit post{{/linkTo}}
<a href="#" {{action "delete" model}}>Delete post</a>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post/edit">
<h2>Edit post:</h2>
{{input value=name}}
{{view Ember.Select
contentBinding="users"
optionLabelPath="content.name"
optionValuePath="content.id"
prompt="Pick a user:"
selectionBinding="author"}}
<button {{action "edit" post}}>Save</button>
</script>
<script src="http://www.mattburns.co.uk/temp/ember/js/libs/jquery-1.9.1.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment