动态监听 Backbone.js 视图的渲染函数被调用

Question

我正在尝试动态扩展 Backbone.js 视图的渲染功能。在这样做时，我希望能够在调用渲染之前和之后触发一个事件。我尝试覆盖该函数并调用旧函数，该函数有效，但所有绑定到渲染函数的模型都失去了它们的绑定。我目前拥有的代码如下，如果我传入创建的 Backbone.js 视图：

function bindRenders(view) {

    view.render = (function() {
        var cachedRender = view.render;

        return function() {
            console.log("before render");
            cachedRender.apply(this, arguments);
            console.log("after render");
        };
    }());
}

同样，上面的代码可以工作，但所有模型都通过以下方式绑定到渲染函数：

    this.model.on('change', this.render, this);

休息。我找到的唯一解决方案是在覆盖函数后重新绑定模型的 .on('change') 事件。然而，并不是每个视图的模型都会以这种方式绑定。很感谢任何形式的帮助！谢谢！

Answer 1

你是什么意思'休息'？当模型更改时，您之前的渲染代码仍然会被调用？

这是因为绑定到“更改”事件的函数不是您的新函数，您只是更改视图的“渲染”属性，而不是更改时执行的内容。 我想如果你的绑定是这样的：this.model.on('change', function(){return this.render()}, this)

但我不明白你为什么想要那个。在我看来，你应该使用继承来应用这种常见的行为。

类似的东西（非常简化）

var MyBaseView = Backbone.View.extend({
  ...
  render: function(){
    this.trigger('beforeRender');
    this.beforeRender()

    //do something generic
    ...

    this.afterRender()
    this.trigger('afterRender');
  }
  ...
});

var MyOtherView = MyBaseView.extend({
  ...
  beforeRender: function(){
    //do something specific
  }

  //do NOT override "render"

  afterRender: function(){
    //do some other specific things
  }
  ...
});

或者像Backbone.js view inheritance这样更好的解决方案

另外我想https://github.com/tbranyen/backbone.layoutmanager 有很多你想要实现的目标。