頁面呈現正確，但刷新很多時間

我正在使用Backbone.js，我有四個模板顯示4個圖。一切工作正常，但只有問題是我的頁面刷新所有圖形在用戶界面上呈現四次。頁面的刷新發生得非常快。在頁面/圖形開始顯示之前，Chrome的刷新圖標超快速閃爍。頁面呈現正確，但刷新很多時間

我正在使用jQuery的when then以確保我的模型在視圖開始呈現之前完全獲取。另外，我爲圖的所有視圖模型調用this.render()四次。這顯然是需要的，因爲我有四個模板。有人能指導我什麼可能是問題。

first viewmodel: 

initialize: function() { 
     this.model.on('change', this.render, this); 
     this.render(); 
    }

對於所有四種視圖模型重複相同的事情。

一個圖形的實際視圖模型：

define(['backbone'], function(Backbone) { 
    var firstSubViewModel = Backbone.View.extend({ 
    template: _.template($('#myChart-template').html()), 
    /** 
    * render function. Renders data onto graph. 
    * @param none 
    */ 
    render: function() { 
     console.log("inside first sub view render"); 
     $(this.el).html(this.template()); 
     var ctx = $(this.el).find('#lineChart')[0]; 
     var lineChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
      datasets: [{ 
      label: "This Year", 
      backgroundColor: "rgba(38, 185, 154, 0.31)", 
      data: this.model.attributes.incThisYear 
      }, { 
      label: "Last Year", 
      backgroundColor: "rgba(3, 88, 106, 0.3)", 
      borderColor: "rgba(3, 88, 106, 0.70)", 
      data: this.model.attributes.incLastYear 
      }] 
     }, 
     options: { 
      scales: { 
      yAxes: [{ 
       scaleLabel: { 
       display: true, 
       labelString: 'Income in $' 
       } 
      }] 
      } 
     } 
     }); 
    }, 

    initialize: function() { 
     console.log("inside first sub view initialize"); 
     this.model.on('change', this.render, this); 
     this.render(); 
    } 
    }); 

    return firstSubViewModel; 
});

提琴手截圖：

來源

2016-07-22 Unbreakable

你不應該使用'$（this.el）'，已經有'這$ el'快捷。 '$（this.el）.find（'＃lineChart'）'同樣，使用'this。$（'＃lineChart'）'代替。 –

這是一種在黑暗中拍攝的，但我認爲問題在於這樣一個事實，你添加偶數監聽第一個（this.model.on('change', this.render, this);），那麼當你實際撥打render()時，它正在檢測到一個變化，然後再次觸發render()。剛剛嘗試翻轉它們：

initialize: function() { 
    this.render(); // render it first 
    this.model.on('change', this.render, this); 
}

來源

2016-07-22 18:10:05

頁面呈現正確，但刷新很多時間

回答

相關問題