Ember JS:在调用destroyRecord并创建新记录后,模型重新出现

时间:2015-02-06 00:54:12

标签: ruby-on-rails ember.js

我正在Ember.js和Rails中建立社交书签网站。我使用的是ember-rails gem。我无法在Ember.js方面销毁书签记录。我确认它们正被服务器删除,并返回200代码。我有一个具有许多主题的用户模型,并且主题有许多书签。这里有一个奇怪的事情:主题被破坏没有问题。它们永远不会再出现在模板中。

然而,当书签被删除时,它们似乎已经消失;但是,当创建新记录时,书签会重新出现并且无法再次销毁。刷新浏览器时,重新出现的书签会消失。

这是我的主题模板的代码,可以从中删除书签:

{{#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}}

这是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');
    }
  }
});

这里是TopicRoute的代码:

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

提前感谢您提供的任何帮助。如果我能提供有助于解决此问题的其他信息,请告诉我。

更新:我注意到如果我检查indexOf被破坏的项目,它仍然存在于-1。这是正常的吗?在Ember Inspector中,它显示在数组的内容中,但似乎没有反映在数组的长度中。

已解决:我的路线正在返回&#34; ManyArray&#34 ;;显然是导致问题的原因是因为我改变了获取所有书签的路线,然后在控制器级别按主题过滤它们。这导致了一个&#34; RecordArray&#34;作为书签的模型。

1 个答案:

答案 0 :(得分:0)

已解决:我的路线正在返回&#34; ManyArray&#34 ;;显然是导致问题的原因是因为我改变了获取所有书签的路线,然后在控制器级别按主题过滤它们。这导致了一个&#34; RecordArray&#34;作为书签的模型。