2014-01-30 70 views
0

我對Backbone.js非常陌生,至今仍然喜歡它,但我在嘗試獲取關係數據進行呈現時遇到了一些問題。Backbone視圖呈現中的getJSON問題

在我的骨幹視圖(稱爲ImagesView)我有以下代碼:

// Render it 
render: function() { 

    var self = this; 

    // Empty the container first 
    self.$el.html("") 

    // Loop through images 
    self.collection.each(function(img){ 

    // convert `img` to a JSON object 
    img = img.toJSON() 

    // Append each one 
    self.$el.append(self.template(img)) 

    }, self) 
} 

有集合中的3張圖片,以及它們與上面的代碼正確模板。在img對象內是一個user屬性,其中包含用戶標識。我試圖返回用戶的詳細信息,並在模板中使用這些內容而不是ID。我做的是使用下面的代碼:

// Render it 
render: function() { 

    var self = this; 

    // Empty the container first 
    self.$el.html("") 

    // Loop through images 
    self.collection.each(function(img){ 

    // convert `img` to a JSON object 
    img = img.toJSON() 

    /* New code START */ 

    // Each img has a `user` attribute containing the userID 
    // We'll use this to get their details 
    $.getJSON('/user/' + img.user, {}, function(json, textStatus) { 
     img.photographer = { 
     id: json.id, 
     username: json.username, 
     real_name: json.real_name 
     } 

     /* Moved 1 level deeper */ 
     // Append each one 
     self.$el.append(self.template(img)) 
    }); 

    /* New code END */ 

    }, self) 
} 

當我這樣做,是正確返回並插入到模板中的用戶的詳細信息,但我現在得到的每個圖像的3回,而不是1(即9總數),以完全隨機的順序。我究竟做錯了什麼?我打算使用Backbone方法而不是getJSON,如果這樣會讓它更容易,我就是無法讓它自己工作。我正在使用underscore.js進行模板化

回答

2

隨機順序很可能是由於請求被以非常接近的時間間隔觸發並且響應返回它們被觸發的順序。我不確定爲什麼得到多重的東西,但是如果你的模板渲染了所有東西,那麼你可能會這麼稱呼它3次?

無論如何,我認爲你會錯誤的是把數據加載到渲染方法的責任。您希望將其抽象出來,以便您將數據關注點和模板關注點分開。由於數據的排序是有意義的,所以您需要所有3個請求在渲染之前加載。您可以採用兩種不同的方法,具體取決於在加載此數據之前是否有足夠的數據來呈現視圖:

如果您在呈現視圖之前等待所有數據,那麼您需要呈現一個不同的視圖(或該視圖的模板),同時加載數據,然後將其替換爲顯示所有數據加載後的視圖。

如果您有足夠的數據來呈現視圖並且您正在加載的內容是補充的,您希望使用渲染中的數據呈現視圖,然後在加載其他數據後使用自定義方法來修改呈現的視圖包含您的數據。

如果你想知道什麼時候所有3個請求都完成了,你可以使用http://api.jquery.com/jquery.when/