主干视图渲染功能的上下文问题

Question

我正在尝试在我的 Backbone 视图的渲染函数中包含一个可选参数，如下所示：

var AppView = Backbone.View.extend({
        el: '#app',

        initialize: function(){
                _.bindAll(this,'render');
                this.listenTo(app.collection.sellables,'reset', this.render);
        },

        render: function(sellableId){
                if(typeof sellableId == "undefined"){
                        var sellable = app.collection.sellables.first();
                }
                else{
                        var sellable = app.collection.sellables.get(sellableId);
                }
                var view = new SellableView({model: sellable});
                this.$('#sellables').append(view.render().el);
        },
});

第一次呈现这个视图时，它发生是因为app.collection.sellables 集合在从服务器接收到一些数据后被重置。当此重置发生时，视图的渲染函数被调用，但不是以 sellableId 未定义的方式调用，而是 sellableId 等于 app.collection.sellables 变量，这会导致错误。为了澄清，视图的渲染函数被调用是因为：

app.collection.sellables.reset(data.skus);

为什么我的渲染函数会接收集合作为参数而不是未定义的参数？

另外，如果我手动渲染视图，它可以正常工作，并且 sellableId 参数未按预期定义：

var app.view.app = new AppView;
app.view.app.render();

Answer 1

您在此处将render 绑定到"reset"：

this.listenTo(app.collection.sellables,'reset', this.render);

来自Catalog of Events：

• "reset"（集合，选项）— 当集合的全部内容被替换时。

因此，"reset" 事件的处理程序始终将集合作为其第一个参数。请记住，JavaScript 函数的参数是在调用函数时确定的，而不是在定义函数时确定的。

您有几个选择。您可以将其他内容绑定到 "reset" 事件：

initialize: function() {
    //...
    this.listenTo(app.collection.sellables, 'reset', this.been_reset);
},
been_reset: function() {
    this.render();
}

您可以在不带参数的情况下保留render（如标准render）并使用单独的函数来处理参数：

render: function() {
    return this.append_model(app.collection.sellables.first());
},
append_model: function(sellable) {
    var view = new SellableView({model: sellable});
    this.$('#sellables').append(view.render().el);
    return this;
}

然后你会打电话给view.append_model(app.collection.sellables.get(sellableId)) 来添加一个特定的模型。