Skip to content

Instantly share code, notes, and snippets.

@huafu
Forked from anonymous/gist:6565738
Last active December 23, 2015 02:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save huafu/6565756 to your computer and use it in GitHub Desktop.
Save huafu/6565756 to your computer and use it in GitHub Desktop.
EmBlog = Ember.Application.create({
LOG_TRANSITIONS: true
});
EmBlog.Comment = DS.Model.extend({
body: DS.attr('string'),
post: DS.belongsTo('post')
});
EmBlog.Post = DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
comments: DS.hasMany('comment')
});
EmBlog.Router.reopen({
location: 'history'
// rootURL: '/'
});
EmBlog.Router.map(function() {
this.resource('posts', function(){
this.route('new');
//routes to /posts/:post_id
this.resource('post', {path: ':post_id'}, function(){
this.route('edit');
//routes to /:post_id/comments
this.resource('comments', function() {
this.route('new');
this.resource('comment', {path: ':comment_id'}, function() {
this.route('edit');
});
});
});
});
});
EmBlog.PostsRoute = Ember.Route.extend({
actions: {
removePost: function(post) {
//deletes record from ember-data store
post.deleteRecord();
//persist change to your backend server
post.save().then(
function() {
this.transitionTo('posts.index');
},
function(error) {
// work with person that failed to save
if (error.status == 422) {
alert("Validation error");
} else {
alert("Something went wrong, try again");
}
}
);
}
}
});
EmBlog.PostsIndexRoute = Ember.Route.extend({
model: function(){
return this.store.find('post');
},
setupController: function(controller, model){
this._super(controller, model);
//controller.set('content', model);
}
});
EmBlog.PostsNewRoute = Ember.Route.extend({
model: function(){
return this.store.createRecord('post');
},
exit: function() {
this._super();
this.get('currentModel').rollback();
},
actions: {
save: function(post) {
post.save().then(
function(){
this.transitionToRoute('post.index', post);
},
function(error){
if (error.status == 422) {
alert("Validation error");
} else {
alert("an error occured -- Pls try again")
}
}
);
},
cancel: function() {
this.transitionTo('posts.index');
}
}
});
EmBlog.PostCommentsRoute = Ember.Route.extend({
setupController: function(controller, model) {
comments = this.controllerFor('post').get('comments');
controller.set('content', comments);
},
actions: {
removeComment: function(comment) {
//deletes record from ember-data store
comment.deleteRecord();
//persist change to your backend server
comment.save().then(
function() {
this.controllerFor('postNewComment').set('isEditing', false);
this.transitionTo('post.index');
},
function (error){
// work with person that failed to save
//comment.rollback();
alert("An error occured - Please try again");
}
);
}
}
});
EmBlog.PostNewCommentRoute = Ember.Route.extend({
model: function() {
var post = this.modelFor('post');
return this.store.createRecord('comment', {post: post});
},
setupcontroller: function( controller, model) {
this._super();
controller.set('content', model);
controller.addComment();
},
actions: {
save: function(comment){
comment.save().then(
function() {
this.controllerFor('postNewComment').set('isAddingNew', false);
this.transitionTo('post.index');
},
function(error) {
// work with person that failed to save
comment.rollback();
alert("An error occured - Please try again");
}
);
},
cancel: function(comment) {
this.controllerFor('postNewComment').set('isAddingNew', false);
this.transitionTo('post.index');
}
}
});
<div class="container-fluid">
<div class="row-fluid">
<div class="navbar">
<div class="nav-inner">
<a class="brand" href="#"> Emblog </a>
<ul class="nav">
<!-- <li {{bindAttr class='isPosts:active'}}> {{#link-to 'posts.index'}} Post {{/link-to}}</li> -->
<li {{bindAttr class='isHome:active'}}> {{#link-to 'index'}} Home {{/link-to}}</li>
<li><a href='/posts'> Posts </a> </li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Profile
<b class="caret"> </b>
</a>
<ul class="dropdown-menu">
<li> <a href="#"> settings </a></li>
<li class="divider"> <li>
<li> <a href="#"> Log out </a> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- sidebar & master view -->
<div class="row-fluid">
<ul class="nav nav-list span3 well">
<li> {{#link-to 'index'}} Home {{/link-to}} </li>
<li> {{#link-to 'posts.index'}} Post {{/link-to}}</li>
</ul>
<!-- details view for main content area. click the sidebar it will display here -->
<div class="span9 well">
{{outlet}}
</div>
</div> <!-- closes the div for clas='row-fuid' -->
</div>
<div class="container-fluid">
<div class="row-fluid">
<table class="table">
<thead>
<tr><th> Recent Blog Posts</th> </tr>
</thead>
<tr>
<td> <h3> {{title}} </h3> </td>
</tr>
<tr>
<td> {{body}} </td>
<td class='form-actions'>
{{#link-to 'post.edit' this class='btn'}} Edit{{/link-to}}
<a href='#'{{action removePost this}} class='btn btn-danger'> Destroy </a>
</td>
<td></td>
</tr>
<!-- appears before comments -->
<tr> <td> {{#link-to "post.newComment"}} Add comment{{/link-to}}</td></tr>
<tr><td>{{render 'post.comments' comments}}</td></tr>
</table>
<br />
<p class="btn btn-primary"> {{#link-to 'posts.index'}} back {{/link-to}}</p>
<div>
{{outlet}}
</div>
</div>
</div>
<h1>Comments</h1>
<br/>
{{#each controller}}
<tr>
<td>{{body}} </td>
<td class="form-actions">
{{#link-to "post.editComment" this class='btn'}} Edit{{/link-to}}
<!-- <a href='#' {{action 'removeComment' this}} class="btn btn-danger"> Destroy </a> -->
<a href='#' {{action 'destroyMe' this target="controller.controllers.postEditComment"}} class="btn btn-danger"> Destroy </a>
</td>
</tr>
{{/each}}
<!-- works even if we don't pass in body -->
<!-- {{render 'post.comment' body}} -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment