mongo 文档更改时更新表示层

Question

我的表中有一个狗列表，其中包含基础狗模型和狗集合。当我更新 mongo 集合中狗文档的 dogName 时，我希望表格列表项更新并显示新的狗名，而无需刷新页面。

我认为当你 this.listenTo(this.model, 'change', this.render); 时应该会发生这种情况

如何在模型更改时更新表格行项？？

window.Dog = Backbone.Model.extend({
    urlRoot: "/dogs",
    idAttribute:"_id",
    initialize: function() {

    } 

    defaults:{
        _id: null,
        dogName: "", 
    }
});

window.DogCollection = Backbone.Collection.extend({
    model: Dog,
    url: "/dogs/user/",
});

window.DogListView = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.model, 'change', this.render);
        this.render();
    },

    render: function () {
        var dogs = this.model.models;
        $(this.el).html(this.template());                

        for (var i = 0; i < dogs.length; i++) {
            this.$('#dogsTable tbody').append(
                new DogListItemView({model: dogs[i], no: i+1}).render().el
            );
        }

        this.$('#dogsTable').dataTable({
            "bAutoWidth": false,"iDisplayLength": 50
        });        

        return this;
}
});

window.DogListItemView = Backbone.View.extend({

    tagName: "tr",

    initialize: function (options) {

        this.listenTo(this.model, 'change', this.render);
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);

        this.no = options.no;

        this.render();
    },

    render: function () {

        $(this.el).html(this.template({
            no: this.no,
            id: this.model.get("_id"),
            dogName: this.model.get("dogName"),

        }));

        return this;
    },

    events: {
        "click .delete": "deleteDog",
    }

});

最后在主干控制器中，我使用它来加载视图：

var dogList = new DogCollection();

dogList.url = "/dogs/user/" + this.user.get("_id");            

dogList.fetch({
    success: function() {
        $('#content').html(new DogListView({model: dogList}).el);
    }
});

Answer 1

你现在正在做的是：

• 创建一些视图（item- 和 collectionViews）
• 定义一个集合
• 为此集合设置一个网址
• 获取集合并成功
• 在这些视图中显示提取的数据

这完全没问题，一旦集合中的任何模型发生更改，这些视图（可能没有测试您的代码）就会更新。

但是，一旦获取数据，您的应用程序无法知道 mongo 数据库中的某些内容发生了变化。如果您想获得此功能，您可以执行以下操作之一；

• 不时进行一次集合轮询（并因此重新获取）。
• 使用 websocket 通知您的应用程序在服务器上发生了一些变化。如果你想这样做，你可以使用像 http://socket.io 这样的库