骨幹列表視圖/渲染列表查看項目

我非常新的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; 
        //}});  
       } 
      });

來源

2015-07-13 gcc

在你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]，那不會被後面的循環所影響。

來源

2015-07-13 08:11:27 fuyushimoya

非常感謝你！ – gcc

骨幹列表視圖/渲染列表查看項目

回答

相關問題