7

Backbone を初めて使用する場合は、あまり美しくないバックボーン 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') コンテナにロードできます。

しかし、サーバーとビューからコレクションを数秒ごとに自動リロードしたいと思います。どんな助けでも大歓迎です。

4

1 に答える 1

12

もう2つ必要です。

最初：コレクションが変更されたときに更新するようにビューに指示します。これは、ビュー内の初期化関数の改訂版である可能性があります。

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

これにより、新しいアイテムがコレクションに追加されたときにビューが更新されます。注：これにより、セクション全体が再レンダリングされます#students。新しいアイテムにDOMを注入するだけの別のメソッドを作成する方がよいでしょう。

2番目：サーバーから新しいデータをフェッチする方法が必要です。それを受け取ったらすぐに、コレクションに追加するだけです。コレクションのfetch（）メソッドは次のように使用できます。

collection.fetch();

または、バックボーン以外のajax呼び出しを使用して受信した場合は、手動で注入できます。

collection.add(newData);

各ロードの表示と表示の間に数秒の遅延が必要だったため、バックボーンの依存関係になっているアンダースコアライブラリのdebounceメソッドを使用できます。

于 2013-03-15T04:21:38.113 に答える