调用render作为回调时访问视图属性

Access view property when calling render as a callback

本文关键字：访问 视图 属性 回调 render 调用      更新时间：2023-10-11

我必须在render()函数中使用guid变量，但我只能将其传递给构造函数。我这个代码：

app.views.CompanyView = Backbone.View.extend({
    el: '#company-view',
    guid: '',
    initialize: function (options) {
        this.guid = options.guid;
    },
    render: function () {
        var guid = this.guid;
    }
});

我创建这样的视图：

app.currentView = new app.views.CompanyView({guid: guid});

然后我传递render()函数作为参数，将其用作回调：

function call(callback){
    callback();
}
call(app.currentView.render);

我也试过this.guid、options和this.options，但都是undefined。有没有一种方法可以将这个变量传递给render()函数，而不使用它的参数或全局变量？以下是JsFiddle的示例。

当您通过以下方式调用render时：

function call(callback){
    callback();
}

您将其作为一个普通函数调用，因此render中的this将是window。请记住，JavaScript中的this取决于函数的调用方式，而不是函数的定义方式（当然，除非您在玩绑定函数）。

你有一些选择：

  1. 使用_.bindAll、_.bind、$.proxy、Function.bind…将render绑定到视图。。。

    initialize: function() {
    _.bindAll(this, 'render');
}

    演示：http://jsfiddle.net/ambiguous/GsUfY/

  2. 现在更常见的方法是通过函数传递上下文，然后无论谁调用回调，都使用call或apply:使用适当的上下文

    function call(callback, context){
    callback.apply(context);
}

    演示：http://jsfiddle.net/ambiguous/LnwPr/

  3. 自己动手：

    call(function() { v.render() });

    这个函数通常采用var _this = this;的形式，后面是一个匿名函数，该函数使用_this.some_method()，而不是仅将this.some_method作为回调传递。

    演示：http://jsfiddle.net/ambiguous/K2Xj4/

我更喜欢第二种选择。

我明白了。当回调函数调用render（）时，方法的调用方不再是视图本身，因此render内部的"this"将是调用函数（）的调用方。

看看这个小提琴：

http://jsfiddle.net/cn8nN/2/

var CompanyView = Backbone.View.extend({
  initialize: function (options) {
      this.guid = options.guid;
  },
  render: function () {
    console.log('hello');
    console.log(this);
  }
});
var v = new CompanyView({guid: 'the guid'});
function call(callbcak) {
  callbcak();
}
call(v.render);

如果你打开控制台，你会看到"this"实际上就是窗口。

要解决此问题，您需要将上下文绑定到视图本身。

为此，请使用_.bindAll（）；

initialize: function (options) {
    _.bindAll(this, "render");
    this.guid = options.guid;
}

jsfiddle：http://jsfiddle.net/cn8nN/3/

相关文章：