backbone.js - 如何使用backbone.js 定期检查远程数据源并更新表？

Question

具体来说，我有一个标准<table>，我希望随着新数据的输入或输出而更新行。我的数据以 JSON 对象的形式出现，如果有新项目，我想在相应位置的表中添加一行（这意味着顺序很重要）。如果某个项目不存在，我想删除<tr>.

谢谢你的帮助。

Answer 1

http://jsfiddle.net/CoryDanielson/phw4t/

给你，希望代码足够简单，可以遵循...... Backbone.js 时钟。

基本上这个想法是你把一个集合放在一个视图中。然后，您使用 a 使集合定期获取数据setInterval并调用 .fetch({ 'reset': true }) ，以便reset在集合具有一组新数据时触发事件。让视图监听集合的reset事件，然后渲染表格。

重新渲染数据比试图弄清楚哪些数据发生了变化、哪些数据被删除以及哪些数据被添加要容易得多。如果你用硬方法做，或者只是重新渲染整个表格，你最终会得到相同的结果。只要您优化了 DOM 插入（仅写入 DOM 一次...渲染屏幕外），就不会影响性能。

var PollingCollection = Backbone.Collection.extend({
    url: "path/to/data/source",
    model: new Backbone.Model(),
    initialize: function (model, options) {
        this.options = options;
        setInterval(function () {
            this.fetch({
                "reset": true
            });
        }.bind(this), options.pollRate);
    },
    /**
     * Overriding fetch for the example. If the URL was valid, delete the fetch
     * function below.
     */
    fetch: function () {
        this.reset([
        new Backbone.Model({
            "name": "current",
            "time": Date().toString()
        }),
        new Backbone.Model({
            "name": "next fetch",
            "time": "in " + this.options.pollRate / 1000 + " second(s)"
        })]);
    }
});

var TableView = Backbone.View.extend({
    initialize: function (options) {
        this.pollingCollection = new PollingCollection(null, options);
        this.listenTo(this.pollingCollection, 'reset', this.render);
        /**
         * appending to body from within a view is 'bad'. normally another
         * view would place this in the HTML. Just keepin' it simple for
         * example
         */
        $('body').append(this.$el);
    },
    render: function () {
        // Render html into table then append. 1 DOM insert.
        var table = $("<table></table>"),
            html = this.renderTable();
        table.append(html);
        this.$el.html(table);
    },
    renderTable: function () {
        var tableRows = "";
        this.pollingCollection.each(function (model) {
            tableRows += this.renderRow(model);
        }, this);
        return tableRows;
    },
    renderRow: function (model) {
        return "<tr><td>" + model.get('name') + ":</td><td>" + model.get('time') + "</td></tr>";
    }
});

var tableView = new TableView({ "pollRate": 1000 }); // fetch data every 1000 ms