骨幹渲染setTimeOut

我有一個奇怪的問題到我的應用程序。當我渲染一個集合時，它是「空的」，如果我打印它，但是當我console.log這個集合內集合有模型內的twho數組。嗯，這是我的腳本：骨幹渲染setTimeOut

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; 
});

如何使用this.render()沒有SETTIM eOut，因爲我認爲做出這樣的事情是不正確的或不是邏輯的。

感謝

來源

2013-07-20 Alessandro Minoccheri

試試這個：

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

來源

2013-07-20 20:04:27

這完美的作品！非常感謝+1 –

你不得不這樣做，這是因爲this.folders.fetch需要時間的原因。不要設置超時，而應該使用events。 Collection.fetch將成功觸發change事件。

所以，相反認爲是這樣的：

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

來源

2013-07-20 19:56:35 juco

不火的情況下改變，我已經嘗試過.. –

這絕對不會，見[的文檔（http://backbonejs.org/#Collection-fetch）。或者，您可以覆蓋'Collection.fetch'選項參數中的'success'方法 – juco

嗯，我不明白爲什麼它不起作用，我已經將「偵聽器」放在我的應用程序的初始化中，是正確的？ –

你可以聽reset事件，這將調用render方法

更換

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

與

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

來源

2013-07-20 20:22:27

是的另一個答案正確答謝+1 –

歡迎您:) –

我認爲事件是一種處理異步代碼的優雅方式，但您應該確保集合實際觸發'reset'事件：'' this.collection.fetch（{reset：true}）'並且事件回調在**實際發生之前被註冊**。這意味着'fetch'應該在視圖被實例化時發生，而不是之前。 – mor

骨幹渲染setTimeOut

回答

相關問題