0

我的路由器中有一个addPost功能。我不想在postAddView每次调用函数时重新创建：

addPost: function () {
  var that = this;
  if (!this.postAddView) {
    this.postAddView = new PostAddView({
      model: new Post()
    });
    this.postAddView.on('back', function () {
      that.navigate('#/post/list', { trigger: true });
    });
  }

  this.elms['page-content'].html(this.postAddView.render().el);
}

这是 PostAddView：

PostAddView = backbone.View.extend({
  events: {
    'click #post-add-back': 'back'
  }
  , back: function (e) {
    e.preventDefault();
    this.trigger('back');
  }
});

第一次渲染 postAddView 时，事件触发器运行良好。但是，在渲染其他视图page-content并渲染postAddView回来之后，事件触发器将不再被触发。不过，以下版本的addPost效果很好。

addPost: function () {
  var that = this, view;

  view = new PostAddView({
    model: new Post()
  });

  this.elms['page-content'].html(view.render().el);

  view.on('back', function () {
    delete view;
    that.navigate('#/post/list', { trigger: true });
  });
}
4

2 回答 2

2

在某个地方你正在调用 jQueryremove和那个

除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被删除。

因此delegateBackbone 用于将事件绑定到您的调用postAddView.el将丢失。然后，当您重新添加时postAddView.el，不再delegate附加任何事件，也不会触发任何事件。请注意，Backbone.View 的标准remove方法调用 jQuery 的remove; jQuery 中的其他一些东西，就像empty对事件处理程序做类似的事情一样。因此，杀死你的实际函数调用delegate可能隐藏在其他东西的深处。

您可以尝试delegateEvents手动调用：

this.elms['page-content'].html(this.postAddView.render().el);
this.postAddView.delegateEvents();

或者更好的是，只需将视图丢弃并在每次需要时创建一个新视图。您的视图对象应该非常轻量级，因此创建新对象应该比手动跟踪现有视图更便宜且省事得多。

于 2012-07-02T03:52:50.860 回答
1

如果你真的想重用当前的 DOM 和 View，你不需要像你一样一次又一次地设置元素，你调用的一切.html()都是在破坏 View 的 DOM 并再次生成并丢失事件。此外，我更喜欢在渲染视图之前在 DOM 中添加“el”。我将以这种方式拥有您的功能：

addPost: function () {
  if (!this.postAddView) {
    this.postAddView = new PostAddView({
      model: new Post()
    });
    this.postAddView.on('back', this.onBack);
    this.elms['page-content'].html(this.postAddView.el);
  }

  this.postAddView.render();

},

onBack : function () {
  this.navigate('#/post/list', { trigger: true });
}

我不喜欢使用局部变量来引用“this”。如果您的所有视图都_.bindAll(this)在初始化方法中使用，您可以将您的事件绑定到您的视图并可以使用它（检查我如何转换 onBack）。

使用我的代码，无需手动调用this.delegateEvents()

于 2012-07-02T21:03:44.123 回答