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);变量错误。为了澄清，正在调用视图的渲染函数：

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

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

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

{{1}}

Answer 1

您正在将render绑定到"reset"：

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

来自Catalog of Events：

“重置”（集合，选项） - 当集合的全部内容被替换时。

因此"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))添加特定型号。

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

1 个答案: