将数组传递给集合或从服务器获取它有什么区别?

时间:2013-03-19 15:59:28

标签: backbone.js

我认为我不了解Backbone的同步行为。当一个数组传递给集合时,一切正常,当尝试从json文件或服务器获取完全相同的数据结构时,集合不会被填充。 这是调用该集合的内容。

define(['backbone',
'jquery',
'views/users',
'collections/user',
],
function(Backbone, $, UsersView, UserCollection){
var App = Backbone.View.extend({
    el:'.container',

    initialize: function() {
        var test = [

            {"name":"Someone","email":"some@gmail.com"},
            {"name":"Somebodyelse","email":"another@gmail.com"},
            {"name":"John","email":"idiot@aol.com"}
        ];
        var userCollection = new UserCollection(test);
        new UsersView({collection: userCollection});
    }
});
return App;

这在我的用户视图中工作正常。

define(['backbone',
'jquery',
'underscore', 
'views/user',
],
function(Backbone, $, _, UserView){
var Users = Backbone.View.extend({
    el: $('.userlist'),

    initialize: function(){

        this.renderAll();
    },

    renderAll: function() {
        this.$el.empty();
        this.collection.each(this.render, this);
    },

    render: function(user){
        var userView = new UserView({model: user});
        this.$el.append(userView.render().el);
        return this;
    }
});
return Users;   

});

但是当从服务器获取完全相同的json时:

define(['backbone',
'jquery',
'views/users',
'collections/user',
],
function(Backbone, $, UsersView, UserCollection){
var App = Backbone.View.extend({
    el:'.container',

    initialize: function() {

        var userCollection = new UserCollection;
        userCollection.fetch();
        new UsersView({collection: userCollection});
    }
});
return App; 

});

该集合将填充1个模型数组,其中包含四个模型。因此,对this.collection(this.render,this)的调用仅调用render函数一次。这导致将其记录到控制台:

child {models: Array[0], length: 0, _byId: Object, constructor: function, url: "/users"…}
    _byId: Object
    _idAttr: "id"
    length: 4
    models: Array[4]
    __proto__: Surrogate

当我在fetch中执行一些错误检查时:

userCollection.fetch({
        success: function(response) {
        console.log(response);
    }

然后集合中填充了4个模型,而不是1个阵列,其中包含4个模型,如在登录到控制台的内容中所示:

child {models: Array[4], length: 4, _byId: Object, _idAttr: "id", constructor: function…}
_byId: Object
_idAttr: "id"
length: 4
models: Array[4]
__proto__: Surrogate

我并不擅长使用javascript,而且我仍在尝试使用模块来解决问题。集合传递方式或服务器数据的问题是什么?

1 个答案:

答案 0 :(得分:0)

通过将reset事件绑定到renderAll函数来修复它。我不是很了解它,所以很糟糕,但它最不起作用。