backbone model 重复绑定问题

willerce
  • 2k

这是 router 中的一个函数。

routes: {
  "post/:id": "postEdit"
},
postEdit: function (id) {

  console.log('router.js, got router: #/post/' + id);

  UILoading($("#main"));

  var model = new PostModel({_id: id});

  model.fetch({
    success: function () {
      new PostEditView({model: model});
    },
    error: function () {
      console.log("failed, on router: #/post/" + model.id);
    }
  });
}

接下来是 View 的代码

var PostEditView = Backbone.View.extend({

    el: '#main',
    template: doT.template(PostEditTemplate),

    events: {
      'click #savePost': 'save'
    },

    initialize: function () {
      _.bindAll(this, 'render');
      this.model.bind("change", this.render, this);

      var converter = Markdown.getSanitizingConverter();
      this.editor = new Markdown.Editor(converter);

      this.render();
    },

    render: function () {
      this.$el.html(this.template(this.model.toJSON()));
      this.editor.run();
    },

    save: function () {
      this.model.set({
        title: $("#post_title").val(),
        slug: $("#post_slug").val(),
        created: $("#post_created").val(),
        tags: $("#post_tags").val().split(','),
        content: $(".post_content").val()
      });

      this.model.save();
    }

  });

最后发现,当访问过多次#/post/5103fbb3817feb1c10000001,/#/post/5103c114ce4c724c12000002 后,save 这个函数会重复调用。

相当于之前的 model 没有被释放,事件重复执行了。

如何解决这个问题呢?

回复
阅读 7.1k
2 个回答

自问自答。

view 的切换,主要由路由来触发,所以在 router 中加了一个函数来做 view 切换管理。

switchView: function (view) {
  if (this.currentView) {
    this.currentView.remove();
  }
  this.currentView = view;
},

每次 route ,都调用 switchview 来进行切换。

// #/post/512c4527f7d8797818000001
postEdit: function (id) {
  console.log('router.js, got router: #/post/' + id);

  var that = this;
  var model = new PostModel({_id: id});
  var view = new PostEditView({model: model});
    this.switchView(view);
    //...... do something.
  }
hellolibo
  • 332
routes: {
  "post/:id": "postEdit"
},
postEdit: function (id) {

  console.log('router.js, got router: #/post/' + id);

  UILoading($("#main"));

  var model = new PostModel({_id: id});
  var view = new PostEditView({model: model});

  model.fetch({
    error: function () {
      console.log("failed, on router: #/post/" + model.id);
    }
  });
}

view 里的initialize可以不直接执行render,放到事件里吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏