在backbone.js中使用bind传递上下文

Question

我希望我的面板在单击时重新渲染.

但是,当我执行单击时,我得到以下内容:

Uncaught TypeError: Cannot call method 'get' of undefined

看来,我正在记录的"这个"实际上就是模型本身:

_callbacks: Object
_changed: true
_escapedAttributes: Object
_previousAttributes: Object
attributes: Object
cid: "c0"
collection: r.d
id: "f5589ba4-a0aa-dd86-9697-30e532e0f975"
__proto__: n

我无法通过将我的上下文传递给model.bind来弄清楚为什么不能保留适当的"this".

这是我的代码:

// Models
window.Panel = Backbone.Model.extend({

    defaults: function(){
        return {
            flipped: false,
        };
    },

    toggle: function(){
        this.save({flipped: !this.get("flipped")});
    },

});


// Collections

window.PanelList = Backbone.Collection.extend({

    model:Panel,

    localStorage: new Store("panels"),    

    flipped: function(){
        return this.filter(function(panel){ return panel.get("flipped"); })
    }   
});


// Global collection of Panels
window.Panels = new PanelList;

// Panel View

window.PanelView = Backbone.View.extend({ 

    tagName: 'div',

    template: _.template($("#panel-template").html()),  

    events: {
        "click" : "toggle"
    },

    initialize: function(){
        this.model.bind("change", this.render, this) 
        $(this.el).html(this.template(this.model.toJSON()));
    },     

    render: function(){    
        console.log(this);
        var flipped = this.model.get("flipped")
        if (flipped){
           $(this.el).addClass("flip"); 
        } else{
           $(this.el).removeClass("flip"); 
        }           
        return this   
    },

    toggle: function(){
        this.model.toggle(); 
    }
});   

Answer 1

这样做的主干方法是使用_.bindAll(...)下划线提供的功能:

initialize: function(){
    _.bindAll(this, "render");
    this.model.bind("change", this.render) 
    $(this.el).html(this.template(this.model.toJSON()));
}

这里_.bindAll记录了什么,但它基本上是为此目的而构建的.如果要在对象的所有功能中this正确设置,可以不使用功能列表进行调用.在我的大多数视图中,我倾向于使用此全局绑定函数._.bindAll(this)

Answer 2

我遇到了同样的问题,最后使用了underscore.js的_.bind()方法.我向SO询问了回复,这是我得到的回复.

尝试改变: this.model.bind("change", this.render, this)

至: this.model.bind("change", _.bind(this.render, this))