在主干視圖中處理圖像錯誤事件

Question

在骨干視圖使用的下划線模板中，我有一個圖像。 我試圖附加到錯誤事件並在未找到原始圖像的情況下更改圖像源。

基於這個類似的問題 ，我采用了以下方法：

render: function() { 
    var self = this;

    this.$el.html( this.template( { person: this.model.toJSON() } ) ); 

    this.$el.find('img.employee-image').on('error', function(evt) { this.src = "assets/images/_noimage.gif"; });

    return this;
}

這可以很好地工作，但是如果我嘗試將src的更改移至視圖中的單獨方法，則將調用該方法，但圖像不會更改。

render: function() { 
    var self = this;

    this.$el.html( this.template( { person: this.model.toJSON() } ) ); 

    this.$el.find('img.employee-image').on('error', function(evt) { self.handleMissingImage(evt); });

    return this;
},

handleMissingImage: function(evt) {
    // This by itself did not work.
    // this.src = "assets/images/_noimage.gif";

    var i = $(evt.currentTarget);
    i.src = "assets/images/_noimage.gif";
    console.log(i.src);
}

注銷src將顯示“ assets / images / _noimage.gif”，但圖像不會出現。 我知道它的存在是因為上面概述的第一種方法效果很好。

我在這里想念什么？

Answer 1

我認為您的問題就在這里：

i.src = "assets/images/_noimage.gif";

在handleMissingImage函數中，您說：

i = $(evt.currentTarget);

所以i是一個jQuery對象，而不是原始的DOM元素。 這意味着您想說i.attr('src', ...)來更改src屬性，或者根本不用包裝evt.currentTarget 。