何度もページをリフレッシュ/リロードする

Question

JavaScriptとbackbone.jsを学び、小さなWebアプリケーションを開発しようとしています。 しかし、問題は私のページ（グラフ）が何度も再ロードされていることです（予想以上）。したがって、ページが安定してグラフが表示される前に、ページが自動的に何度も（超高速で）リロードされます。私が「ブラウザのリロード」と言うとき、Google Chromeのリフレッシュアイコンのリロードアイコンが/（正回転、逆回転を何回も）リフレッシュし、最後にデータが表示されます。

以下は私が今まで試したことの短いバージョンです。私は学習段階に入っているので、正しいコーディング基準を作成していない可能性があります。それで私を抱きしめてください。

したがって、フロントページにグラフを表示する必要があります（後で同じページにグラフを追加する必要があります）。グラフのデータはRESTサービスからのものです。

HTML：

私は、グラフデータを表示するには1つのアンカー、および1つのテンプレートを持っています。

<div id ="chartAnchor1"></div> 
<script id="myChart-template" type="text/template"> 
    <canvas id="lineChart"></canvas> 
    </script> 

ビューモデル

これは、グラフの特定のデータのためのものである：

var firstSubViewModel = Backbone.View.extend({ 
    template: _.template($('#myChart-template').html()), 
    events: { 
    'click .Refresh': 'fetchModelData' 
    }, 
     fetchModelData: function() { 
     this.model.initialize(); 
    }, 
    render: function() 
    { 
     $(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: [{ 
      data: this.model.attributes.incThisYear 
      }, { 
      data: this.model.attributes.incLastYear 
      }] 
     }, 
       labelString: 'Income in $' 
       } 
      }] 
      } 
     } 
     }); 
    }, 
    initialize: function() { 
     _.bindAll(this, "fetchModelData"); 
     this.model.on('change', this.render, this); 
    } 
    }); 

    return firstSubViewModel; 
}); 

コントローラー：

var ch = new dashboardModel.chart({}); 
    if (// some condition) { 
    var data = { // some data}; 
    ch.fetch(data) 
    }  
    //Main Graph on Dashboard 
    new firstSubViewModel({ 
    el: '#chartAnchor1', 
    model: ch 
    }); 

}); 

モデル： 私はRESTサービスからデータを取得する1つのモデルクラスを持っています。

質問：ページが5-6回更新され、最終的にグラフが完全に読み込まれます。

脚注：私のレンダリング機能に問題はありますか？親切にガイドします。

Answer 1

モデルの変更イベントをthis.model.on('change', this.render, this);というビューのレンダリングメソッドにバインドしました。これは、モデルの変更ごとに、ビューが再レンダリングされることを意味します。

そして、モデル属性を直接Chart()関数に渡しています。その内部で何が起きているのか分かりませんが、チャートの描画の一部として何度もモデルの属性を更新している可能性があります。また、それぞれの変更によって、メソッドを再度呼び出す別のrenderが発生し、renderを呼び出すため、モデルに加えられた変更の数がChart()である限り可能性が高いです。

どちらかそれのデータのコピーを取得し、描画のためのchart()方法にそれを渡すためにthis.model.on('change', this.render, this);または使用モデルのtoJSON()メソッドを削除します。このような使用事例は、toJSON()メソッドが存在する理由です。もう一つの問題は、非同期fetchを処理している

---

、私はthis.model.on('change', this.render, this);はこれを処理するためにあなたの試みだったと思うが、それは間違っているのです。

別に手動でモデルを初期化するべきではないことから、

var ch = new dashboardModel.chart({}); 
/* ---------------------------^ this is the actual model constructor? 
Then what's dashboardModel?! Bad naming ;) */ 

ch.fetch({ 
    success: function(model, response) { 
    new firstSubViewModel({ 
     el: '#chartAnchor1', 
     model: ch 
    }); 
    } 
}); 

---

：あなたは、このような

this.model.on('sync', this.render, this); 

など何かをするなどの代わりにsync、などのイベントに耳を傾ける必要がありますどちらか。これはBackbone.jsによって処理される1回のアクティビティで、の初期化コードのみをその中に追加する必要があります。私はすでにで初期化されたモデルで手動でinitializeを呼び出すことによって達成しようとしていたことについて考えることができません。

永続性レイヤーからデータをフェッチするには、fetch()メソッドを使用する必要があります。コントローラで

fetchModelData: function() { 
    this.model.fetch({/* options */}); 
} 

---

あなたのコードでは、多くの問題があります。いくつかのデータ？でモデルを試してみて、fetch()するようだが、fetch方法は、主にカスタマイズし、私は（おそらく彼らは実際にはオプションだった上で使用してきたもののようなAJAX呼び出しを処理するため、オプションを受け付けますが、あなたはそれを命名しましたデータ？！その場合はこの点を無視してください）。

また、すべての古典的なBACKBONE.JSにつながるクリーンアップ、あなたがfirstSubViewModelの別のインスタンスを作成した場合の問題が発生しますelオプションを使ってDOMへの直接参照、on代わりのlistenToなどの使用のためにノー参照してぶらぶらビューがありますメモリリークのようなバグ、イベントなどの問題。

これらはすべて回答で処理することはできませんので、よく読んで、一般的なBackbone.jsに関するいくつかの調査を行うことをお勧めします。

---

サイドノート：それはコンストラクタですので、一般的な命名変換によると、firstSubViewModelはFirstSubViewModelでなければなりません。