0

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;

}）;

コレクションには、4つのモデルを含む1つのモデル配列が入力されます。したがって、へのthis.collection(this.render,this)呼び出しは関数を1回だけ呼び出しますrender。これにより、コンソールにログが記録されます。

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

次のようにフェッチでエラーチェックを行うと、次のようになります。

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

次に、コレクションには4つのモデルが入力され、コンソールに記録されているものに見られるように、4つのモデルを持つ1つのアレイではありません。

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

私はJavaScriptが得意ではありませんが、モジュールを使用して頭を悩ませようとしています。コレクションの受け渡し方法やサーバーデータに問題がありますか？

4

1 に答える 1

0

リセット イベントを renderAll 関数にバインドすることで修正しました。私はそれをよく理解していないので、それはひどいですが、少なくともうまくいきます。

于 2013-03-19T16:24:11.060 に答える