Question

所以我有一个路线文件：

Nightbird.Routers.Posts = Nightbird.Routers.Core.extend({

  DEFAULT_TIMEOUT: 15000,

  fetchPostsTimeout: null,

  routes: {
    'posts': 'posts',
    'post/:id': 'post',
  },

  posts: function() {
    var postsCollection = new Nightbird.Collections.Posts();
    postsCollection.fetch().then(this.postsRecieved, this.serverError);

    var self = this;
    this.fetchPostsTimeout = setInterval(function() {
      postsCollection.fetch().then(self.postsRecieved, self.serverError);
    }, this.DEFAULT_TIMEOUT);
  },

  post: function(id) {
    var postsCollection = new Nightbird.Collections.Posts({id: id});
    postsCollection.fetch().then(this.postRecieved.bind(this), self.serverError);
  },

  postsRecieved: function(collection, response, options) {
    var managementPostsView = new Nightbird.Views.ManagementPosts();
    managementPostsView.render(collection, this.currentPage);
  },

  postRecieved: function(collection, response, options) {
    new Nightbird.Views.ManagementPost(collection);
  },

})

所有在这里做的是定义当你访问所述路线时会发生什么。因此，如果您访问#posts路线，则会获得一个帖子列表，并且每15秒检查一次新帖子。

但是，让我们说你去#posts然后点击帖子，然后转到#post/x，其中x是帖子ID。让我们看一下这个帖子的视图。

Nightbird.Views.ManagementPost = Nightbird.Views.Core.extend({

  comments: {},

  post: {},

  commentsTimeOut: null,

  errorMessage: '',

  initialize: function(postsObject) {
    this.post = postsObject;
    var postId = this.post.post.id

    var commentsCollection = new Nightbird.Collections.Comments(postId);
    commentsCollection.fetch().then(this.getComments.bind(this), this.errorMessage.bind(this));

    var self = this;
    this.commentsTimeOut = setInterval(function() {
      commentsCollection.fetch().then(self.getComments.bind(self), self.errorMessage.bind(self));
    }, 15000);
  },

  getComments: function(collection, response, options) {
    this.comments = collection;
    this.render()
  },

  errorMessage: function() {
    this.errorMessage = 'We could not retrieve comments for the post. We will try again in 15 seconds.';
  },


  render: function(collection) {
    React.renderComponent(new ManagementPost({
      post: this.post,
      comments: this.comments,
      errorMessage: this.errorMessage
    }), this.getBlogManagementElement()[0])
  }

});

非常简单，我们收到这篇文章的评论，然后渲染帖子。请注意，我们每15秒检查一次新评论并显示它们。我们使用react来渲染成品。

那么问题是什么？

如果您在#posts并点击博客标题并转到#posts/x，您会看到一条评论的帖子，真棒。但是15秒后我们回到帖子列表，然后15秒后回到帖子上发表评论。它每15秒执行一次。它并没有停止这样做＆＃34;在＆＃34;之间直到您刷新单个帖子页面上的页面，然后它才会停止来回闪烁。

造成这种情况的原因是什么？这是因为当你通过路由器在骨干中旅行时，它们不是真正的重定向吗？我应该使用主干Backbone.history.navigate('', {trigger:true})，如果是这样，我如何传递内容，如ID？或其他变量？

我正在努力建立一个＆＃34;实时＆＃34;博客管理系统和这个闪烁的问题令我感到困惑。

Answer 1

setInterval返回一个值。当你想要停止它时，你需要保持这个值并将它传递给clearInterval。 Backbone无法自动为您执行此操作。

为什么我在骨干路线之间蹦蹦跳跳？

1 个答案: