Question

我有一张桌子上的狗列表，里面有狗模型和狗集合。当我在mongo集合中更新dog文档的dogName时，我希望表列表项更新并显示新的狗名，而不必刷新页面。

我认为这应该发生在你这个时间。听到（这个。模特，＆＃39;改变＆＃39;，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数据库中的某些内容已更改。如果您想获得此功能，可以执行以下操作之一;

偶尔进行收集轮询（然后重新获取）。
使用websockets通知您的应用程序服务器上发生了某些变化。如果您愿意这样做，可以使用http://socket.io

mongo文档更改时更新表示层

1 个答案: