Javascript 主干列表视图/呈现列表视图项

我对Backbone.js很陌生。请参阅我的代码，了解我在这里引用的内容。我有一个视图，应该显示一组“库存”模型。此视图称为“StockDashboardView”。此视图需要的每个库存模型都可以通过“StockDashboardItemView”显示。但是，在每个StockDashboardItemView呈现之前，它各自的股票模型需要获取一些数据（请求股票价格），以便StockDashboardItemView可以使用这些数据绘制图形。StockDashboardView循环浏览每个股票模型，并为每个股票模型创建一个StockDashboardItemView。我应该得到5个不同的图表，每个图表中有不同的公司数据点。但是所有的图形都是相同的，这意味着5个StockDashboardItemView中的每一个都有相同的模型。我知道我的获取/循环逻辑是错误的，但我不知道如何或为什么。我还尝试获取各个StockDashboardItemView，而不是StockDashboardView（请参阅注释掉的代码）。查看我的console.log语句，我看到以下打印语句：（集合有5个模型）。有人能帮我修正一下逻辑吗？多谢各位

----------一,--------

----------一,--------

----------一,--------

----------一,--------

----------一,--------

----------二,--------

----------三,--------

----------二,--------

----------三,--------

----------二,--------

----------三,--------

----------二,--------

----------三,--------

----------二,--------

----------三,--------

window.StockDashboardView=Backbone.View.extend({
初始化：函数（）{
这个。render（）；
},
渲染：函数（）{
var股票=this.model.models；
var len=股票长度；
var startPos=（this.options.page-1）*8；
var endPos=数学最小值（起始时间+8，长度）；
$（this.el）.html（'
）；
对于（var i=startPos；i

在

for循环中

使用

stock=stocks[i]

获取每个股票，然后获取它们

但是，由于

.fetch

是

异步

方法，当它开始执行以呈现股票视图时，您会注意到股票现在指向股票中的最后一项，因此它只会多次呈现最后一项

为什么会发生这种情况？因为

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;
}

render:function（）{
var股票=this.model.models；
var len=股票长度；
var startPos=（this.options.page-1）*8；
var endPos=数学最小值（起始时间+8，长度）；
//把这个移到这里，这样这个就不会有问题了。
var thisEl=this.el；
var fetchStock=函数（股票）{
set（“_id”，stocks[i].toJSON（）[“tickerSymbol]”）；
fetch（{成功：函数（模型、响应、选项）{
stock.set（“数据”，响应）；
//将交互设置为false
console.log（“------------2----------”）；
$（'.thumbnails'，thisEl）.append（新的StockDashboardItemView（{model:stock}）.render（）.el）；
}});
};
$（this.el）.html（'
）；
对于（var i=startPos；i

尽你所能

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;
}