jeudi 5 février 2015

Ember JS: Model reappears after destroyRecord is called and a new record is created

I'm building a Social Bookmarking site in Ember.js and Rails. I'm using the ember-rails gem. I am having trouble destroying bookmark records on the Ember.js side of things. I confirmed that they are being deleted on the by the server and a 200 code is returned. I have a User model that has many Topics, and Topics has many Bookmarks. Here's the strange thing: Topics are destroyed without a problem. They never reappear in the template.


However, when Bookmarks are deleted they appear to be gone; yet, when a new record is created, the bookmark reappears and is unable to be destroyed again. The bookmark that reappears goes away when the browser is refreshed.


Here's the code for my Topic template, from where the bookmarks can be deleted:



{{#each bookmark in bookmarks}}
<div class="media">
<div class="media-left">
<img class="media-object" style="width:64px; height: 64px; margin-right: 20px; border-radius: 50%;" {{bind-attr src=bookmark.image}}><br>
</div>
<div class="media-body">
<h4 class="media-heading">
<a {{bind-attr href=bookmark.url}} }}>{{ bookmark.title }}</a></h4>
{{#if bookmark.isUpdating}}
<form style="display: inline;" {{ action 'updateBookmark' bookmark bookmark.url on='submit'}}>
<small>{{input placeholder=bookmark.url value=bookmark.url}}</small>
</form>
{{else}}
<small>{{ bookmark.url }}</small>
{{/if}}<br>
{{ bookmark.description }}
<div><hr>
{{#if bookmark.likedByCurrentUser}}
<button {{action 'destroyLike' bookmark bookmark.likes controllers.current_user.currentUser }} class="btn btn-danger" type="button">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Unlike
</button>
{{else}}
<button {{action 'createLike' bookmark }} class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Like
</button>
{{/if}}
{{#if belongsToCurrentUser}}
{{#if bookmark.isUpdating}}
<button class="btn btn-default" {{action 'updateBookmark' bookmark bookmark.url }}><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Save</button>
{{else}}
<button class="btn btn-default" {{ action 'updateBookmarkToggleOn' bookmark }}><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Update</button>
{{/if}}
<button class="btn btn-default" {{ action 'destroyBookmark' bookmark }}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</button>
{{/if}}
</div>
</div>
</div>
</div><br>
{{/each}}


Here's the TopicController



Blocmarks.TopicController = Ember.ObjectController.extend({
needs: ['current_user'],
bookmarks: (function() {
return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
sortProperties: ['title'],
content: this.get('content.bookmarks')
});
}).property('content.bookmarks'),
actions : {
destroyBookmark: function(bookmark) {
bookmark.destroyRecord();
},
createBookmark: function (topicId) {
var bookmark = this.store.createRecord('bookmark', { url: this.get('url'), topic: this.get('model') });
bookmark.save();
this.set('url', '');
},
updateBookmarkToggleOn: function(bookmark){
bookmark.set('isUpdating', true);
},
updateBookmark: function(bookmark, url){
bookmark.set('url', url);
bookmark.save();
bookmark.set('isUpdating', false);
},
destroyTopic: function(topic) {
topic.destroyRecord();
this.transitionToRoute('topics');
},
updateToggleOn: function(topic){
topic.set('isUpdating', true);
},
updateTopic: function(topic, title){
var controller = this;
topic.set('title', title);
topic.save();
topic.set('isUpdating', false);
},
createLike: function(bookmark){
controller = this;
if (bookmark.get('likedByCurrentUser') == true){
alert("Nope. You've already liked this once!");
} else {
this.store.find('bookmark', bookmark.id).then(function (bookmark) {
var like = controller.store.createRecord('like', {bookmark: bookmark, likedByCurrentUser: true});
like.save();
});
}
bookmark.set('likedByCurrentUser', true);
},
destroyLike: function(bookmark, likes, user){
this.store.find('like', {bookmark_id: bookmark.id, user_id: user.id}).then(function(likes){
likes.objectAtContent(0).destroyRecord();
});
bookmark.set('likedByCurrentUser', false);
},
sortByTitle: function(){
this.get('bookmarks').set('sortProperties', ['title']);
this.get('bookmarks').set('sortAscending', true);
$('#sort-by a').removeClass('active');
$('#sort-by-title').addClass('active');
},
sortByURL: function(){
this.get('bookmarks').set('sortProperties', ['url']);
this.get('bookmarks').set('sortAscending', true);
$('#sort-by a').removeClass('active');
$('#sort-by-url').addClass('active');
},
sortByCreated: function(){
this.get('bookmarks').set('sortProperties', ['created_at']);
this.get('bookmarks').set('sortAscending', false);
$('#sort-by a').removeClass('active');
$('#sort-by-created').addClass('active');
}
}
});


Here's the code for the TopicRoute:



Blocmarks.TopicRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('topic', params.topic_id);
}
});


Thanks in advance for any help that is provided. Please let me know if I can provide additional information that would be helpful in solving this problem.





Aucun commentaire:

Enregistrer un commentaire