バックボーンjsサーバからの自動リフレッシュ/リロードコレクションとコレクションビューの更新ビュー

Question

バックボーンの初心者では、私の美しいバックボーンのJavaScriptコードはご存じですか？

これは、このコードは動作します私のコード

var Schedule = Backbone.Model.extend({ 
    initialize: function() { 
     console.log("initializing model"); 
    } 
}); 

var ScheduleCollection = Backbone.Collection.extend({ 
    model: Schedule, 
    url: "<%=students_swimming_classschedules_path%>", 
    parse: function (resp) { 
     return resp; 
    }, 
}); 

var Schedules = Backbone.View.extend({ 
    initialize: function() { 
     console.log("initializing view"); 
     collection.on('add', this.render, this); 
     this.render(); 
    }, 

    render: function() { 
     for (var i = 0; i < collection.length; i++) { 
      s += "<tr><td>" + collection.models[i].get('account') + "</td><td>" + collection.models[i].get('status') + "</td></tr>"; 
     } 
     this.$el.html(s); 
    }, 
}) 

var schedules = new Schedules({ 
    el: $("#students") 
}); 

window.setInterval(function() { 
    collection.fetch(); 

}, 2000); 

です。すべての学生を$（ '＃students'）のコンテナに読み込むことができます。

しかし、サーバーとビューから数秒ごとにコレクションを自動的に再読み込みしたいと思います。どんな助けもありがとう。

Answer 1

あなたは今、2つのものが必要：

まず：コレクションが変更されたときに更新するために、あなたのビューを教えてください。これは、あなたのビューのinitialize関数の改訂版かもしれません。

initialize : function(){ 
    console.log("initializing view"); 
    collection.on('add', this.render, this); 
    collection.on('reset', this.render, this); 
    this.render(); 
}, 

これは、新しいアイテムがコレクションに追加されたときに表示を更新します。 注：これにより、#studentsセクション全体が再描画されます。新しい項目をDOMに注入する別のメソッドを記述するとよいでしょう。

第2： サーバーから新しいデータをフェッチする方法が必要です。受け取ったらすぐにコレクションに追加するだけです。

collection.fetch(); 

か、あなたは非バックボーンのAJAX呼び出しを使用して、それらを受け取った場合は、手動で注入することができます：

collection.add(newData); 

あなたは数秒の遅延したかったとして、あなたのようなあなたのコレクションのfetch()メソッドを使用することができます各ロードとショーの表示の間に、すでにバックボーンに依存しているアンダースコアライブラリのdebounceメソッドを使用することができます。