0

私のコードは3つのステップで機能します:

  • 構造を持つコレクションをフェッチします。
  • コレクションを作成します。
  • collectionView でコレクションをレンダリングします。

cssElementListViewでコレクションをレンダリングすると、

  • alert("toto") を許可すると、すべてのコレクションが適切にレンダリングされます。
  • そうでない場合は、[オブジェクト オブジェクト] をレンダリングします。

どうしたの ？

 /************************************ Collection *******************************/

var cssElementList = Backbone.Collection.extend({
//on permet de charger different model de donnée
    initialize: function(props) {
        var self=this;

    // binding definition
        _.bindAll(this, "populate");
        this.bind('reset', this.populate);

        // get value from props
        this.url=(props.url==undefined)? "model.json" : props.url;
        this.elem=(props.elem==undefined)? "#age" : props.elem;
        this.model=(props.model==undefined)? cssElement : props.model;
        this.meta("result", "false");

    //fetch with url JSON file
        this.fetch();
    },

    populate: function(){
        var self=this;
        this.each(function(model){
            var mid=model.get('id');
            var mavaleur=$(self.elem).css(mid);
            model.set("value",mavaleur);
        });
    },
});

/************************************ CollectionView *******************************/
//Collection View
var cssElementListView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        this.render();
    },
    render: function(){
        var self=this;
        //TROUBLE IS HERE
        alert("toto");
        this.collection.each(function(model){
            var view = new cssElementView({ el: this.el, model: model });
            $(this.el).append(view.render());
        },this);
    }
});
4

1 に答える 1

1

fetch() の非同期性に問題があると思われます。alert を呼び出すと、サーバーからのデータのフェッチを完了するのに十分な時間が与えられますが、呼び出しを行わないと、レンダリングしようとしたときにコレクションはまだ空です。フェッチ用の ajax がサーバーから返されておらず、まだ成功コールバックを呼び出していません。(コードはこちらの 758 行あたりから読むことができます。)

次のように、ビューを初期化したときにすぐにレンダリングするよりも、レンダリングをリセット イベント (または他のイベント)にバインドする方がよいでしょう。

// in cssElementListView.initialize 
this.collection.on('reset', this.render, this);
于 2012-06-14T16:02:45.083 に答える