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

问题描述：

我非常新的Backbone.js的。请参阅我的代码，了解我在此处提及的内容。我有一个应该显示“股票”模型集合的视图。这个视图被称为'StockDashboardView'。这个视图需要的每个股票模型都可以用'StockDashboardItemView'显示。每个StockDashboardItemView虽然呈现之前，各自的库存模型需要获取一些数据（使股票价格的请求），以便StockDashboardItemView可以使用数据绘制的曲线图。 StockDashboardView通过每个库存模型进行循环，并为每个库存模型创建一个StockDashboardItemView。我应该得到5个不同的公司数据点在每个图表。但是所有图形都是相同的，这意味着5个StockDashboardItemView中的每一个都以某种方式具有相同的模型。我知道我的提取/循环逻辑是错误的，但我不知道如何或为什么。我也试图在各个StockDashboardItemViews代替StockDashboardView获取（见注释掉的代码）。查看我的console.log语句，我看到以下打印语句:(集合有5个模型）。有人能帮我修理我的逻辑吗？谢谢骨干列表视图/渲染列表查看项目

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

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

答

在你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]，那不会被后面的循环所影响。

非常感谢你！ – gcc

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

相关推荐