Backbonejs,在View,Uncaught TypeError中的行为

时间:2013-12-05 23:48:34

标签: javascript backbone.js cordova

解决了吗?不太好。

https://github.com/jashkenas/backbone/issues/2822

这是Cordova + Backbone移动应用程序。我一直在反对这个问题,并认为现在是时候寻求帮助了。

App.PhotoButtonView = Backbone.View.extend({
pic: "",
picid: 1,

events : {
    "click #addPhotoBtn": "addPhoto"
},

initialize: function( options ) {
    this.options = options;
},
render: function() {

    var html = JST['photo-button/view']({num: this.options.picid});
    $(this.el).html( html );

    setTimeout(this.postrender, 0);
    return this;
},

postrender: function() {
    // reset to default image pic
    console.log('addPhotoBtn' + this.options.picid);
    document.getElementById('addPhotoBtn' + this.options.picid ).src =   this.pic;
    var photo = document.querySelector("#addPhotoBtn" + this.options.picid);
},

我还在......

错误:未捕获的TypeError:无法读取未定义的属性'picid'

但现在它被postrender函数解雇了。我敢打赌这与setTimeout hack有关。

编辑:这是初始化PhotoButtonView

的父视图中的代码
postrender: function() {
    $('#submitBtn, .topcoat-button--large').prop('disabled', false);

    this.photo = new App.PhotoButtonView({picid: 1});
    $('#photoButtons').html(this.photo.render().el);

    if (App.activePost.get('photo1')) {
    this.photo2 = new App.PhotoButtonView({picid: 2});
    $('#photoButtons').append(this.photo2.render().el);
    }

    if  (App.activePost.get('photo2')) {
    this.photo3 = new App.PhotoButtonView({picid: 3});
    $('#photoButtons').append(this.photo3.render().el);
    }

    if  (App.activePost.get('photo3')){
    this.photo4 = new App.PhotoButtonView({picid: 4});
    $('#photoButtons').append(this.photo4.render().el);
    }

},

注意:大二学生CS实习生写了这个代码库。我正在修补新的功能。

1 个答案:

答案 0 :(得分:0)

这似乎是this绑定的常见错误。

因为我们将this.postrender回调未绑定传递给setTimout,所以它将在全局命名空间的范围内被称为“函数”样式,this将绑定到全局对象,而不是图。

我们可以通过两种方式调整setTimeout调用,以便在postrender方法中引用this时它可以正确绑定。

选项1(通话/申请方式):

setTimeout(this.postrender.bind(this), 0);

选项2(方法风格):

var that = this;
setTimeout(function () {
  that.postrender();
}, 0);

这是Yehuda Katz关于this和调用的一篇非常好的文章。 http://yehudakatz.com/2011/08/11/understanding-JavaScript-function-invocation-and-this/