Question

我是Backbone.js的新手。请参阅我的代码，我在这里引用了什么。我有一个View应该显示一个＆＃39; Stock＆＃39;楷模。此视图称为＆＃39; StockDashboardView＆＃39;。此视图所需的每个股票模型都可以使用＆＃39; StockDashboardItemView＆＃39;显示。在每个StockDashboardItemView呈现之前，它的相应股票模型需要获取一些数据（请求股票价格），以便StockDashboardItemView可以使用数据绘制图形。 StockDashboardView循环遍历每个Stock Models并为每个Stock Model创建一个StockDashboardItemView。我应该得到5个不同的图表，每个图表都有不同的公司数据点。但是所有图表都是相同的，这意味着5个StockDashboardItemViews中的每一个都以某种方式具有相同的模型。我知道我的获取/循环逻辑是错误的，但我不知道如何或为什么。我也尝试在单独的StockDashboardItemViews而不是StockDashboardView中获取（参见注释掉的代码）。查看我的console.log语句，我看到以下打印语句:(该集合有5个模型）。有人可以帮我修一下我的逻辑吗？谢谢

---------- 1 --------

---------- 2 --------

---------- 3 --------

---------- 2 --------

---------- 3 --------

---------- 2 --------

---------- 3 --------

---------- 2 --------

---------- 3 --------

---------- 2 --------

---------- 3 --------

            window.StockDashboardView = Backbone.View.extend({

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

                render: function () {
                    var stocks = this.model.models;
                    var len = stocks.length;
                    var startPos = (this.options.page - 1) * 8;
                    var endPos = Math.min(startPos + 8, len);

                    $(this.el).html('<ul class="thumbnails"></ul>');
                    for (var i = startPos; i < endPos; i++) {
                        console.log("----------1--------");
                        var stock = stocks[i];
                        stock.set("_id", stocks[i].toJSON()["tickerSymbol"]);
                        stock.fetch({success: function(model, response, options){
                            stock.set("data", response);
                            // set interactivity to false
                            console.log("-----------2---------");
                            $('.thumbnails', this.el).append(new StockDashboardItemView({model: stock}).render().el);
                        }});

                    }

                    $(this.el).append(new Paginator({model: this.model, page: this.options.page}).render().el);

                    return this;
                }
            });

            window.StockDashboardItemView = Backbone.View.extend({

                tagName: "li",

                initialize: function () {
                    this.model.bind("change", this.render, this);
                    this.model.bind("destroy", this.close, this);
                },

                render: function () {
                    $(this.el).html(this.template(this.model.toJSON()));
                    var context = this.$("#chart_div")[0];
                    var stock = this.model;
                    stock.set("_id", stock.toJSON()["tickerSymbol"]);
                    //stock.fetch({success: function(model, response, options){
                        //stock.set("data", response);
                        // set interactivity to false
                        console.log("-----------3---------");
                        var chart = new TFChart(stock.get("_id"), stock.attributes['data'], context, false, this.$("#chart_div").width(), this.$("#chart_div").height());
                        return this;
                    //}});     
                }
            });

Answer 1

在for-loop中，您使用stock = stocks[i]获取每个股票，然后获取它们。

但是，由于.fetch是async方法，当它开始执行以呈现股票视图时，您会注意到股票现在指向股票中的最后一个项目，所以它只是渲染了最后一项。

为什么会这样？因为var使用函数作用域，而不是块作用域（在ES6中，有let可以使用块作用域，但这里有点偏离主题），所以.fetch'都是成功回调，当他们想要使用stock时，他们都会看到相同的stock，这将是for循环中最后一个赋值，并且应该是最后一个股票。

这是一个范围问题，解决方案是将上下文包装到一个函数中，因此函数的作用域将为您保留该项：

render: function () {
    var stocks = this.model.models;
    var len = stocks.length;
    var startPos = (this.options.page - 1) * 8;
    var endPos = Math.min(startPos + 8, len);

    // Move this.el to here, so the this.el's this won't be a problem.
    var thisEl = this.el;
    var fetchStock = function(stock) {
        stock.set("_id", stocks[i].toJSON()["tickerSymbol"]);
        stock.fetch({success: function(model, response, options){
            stock.set("data", response);
            // set interactivity to false
            console.log("-----------2---------");
            $('.thumbnails', thisEl).append(new StockDashboardItemView({model: stock}).render().el);
        }});
    };

    $(this.el).html('<ul class="thumbnails"></ul>');
    for (var i = startPos; i < endPos; i++) {
        console.log("----------1--------");
        fetchStock(stocks[i]);
    }

    $(this.el).append(new Paginator({model: this.model, page: this.options.page}).render().el);

    return this;
}

正如您所看到的，现在当我们致电fetchStock时，stock会引用当前的stocks[i]，并且不会受到后续循环的影响。

骨干列表视图/渲染列表查看项

1 个答案: