backbone.js - 主干渲染 setTimeOut

Question

我的应用程序有一个奇怪的问题。当我渲染一个集合时，如果我打印它，它是“空的”，但是当我在集合中 console.log 这个集合时，模型中有 twho 数组。好吧，这是我的脚本：

define([
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/folder.html',
    'models/folder',
    'collections/folder',
    ], function($, _, Backbone, FolderTemplate, FolderModel, FolderCollection){
    var FolderView = Backbone.View.extend({
        el:$('#folder'),
        template:_.template(FolderTemplate),

        initialize: function(){
            this.render();
        },
        render: function(){
            console.log(this.collection.models);
        }
    });

    return FolderView;
});

调用视图我在另一个应用程序中使用它：

this.folders = new FolderCollection();
this.folders.fetch({ data: { dir: 'uploads'} });
this.foldersView = new FolderView({collection: this.folders});

这个应用程序console.log(this.collection.models);是空的但是如果我用 setTimeOut 做这样的事情，console.log 会返回正确的数组：

define([
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/folder.html',
    'models/folder',
    'collections/folder',
    ], function($, _, Backbone, FolderTemplate, FolderModel, FolderCollection){
    var FolderView = Backbone.View.extend({
        el:$('#folder'),
        template:_.template(FolderTemplate),

        initialize: function(){
            var here = this;
            setTimeout(function(){
                  here.render();
            },800);
        },
        render: function(){
            console.log(this.collection.models);
        }
    });

    return FolderView;
});

如果没有 setTimeOut，我怎么能使用this.render()，因为我认为做这样的事情是不正确或不合逻辑的。

谢谢

Answer 1

您可以收听reset将调用该render方法的事件

代替

initialize: function(){
   var here = this;
   setTimeout(function(){
   here.render();
   },800);
},

和

initialize: function(){
   this.listenTo(this.collection, 'reset', this.render);
},

Answer 2

Try with this:

initialize: function(){
  var self = this;
  this.collection.fetch({
     success: function(){
         self.render();
     }
  });
}

Answer 3

你必须这样做的原因是因为this.folders.fetch需要时间。您应该使用事件而不是设置超时。Collection.fetch成功时将触发一个change事件。

因此，请考虑以下内容：

this.collection.on("change", this.render);