骨幹集合在回去時沒有渲染

Question

我有一個我正在用Trigger.io構建的骨幹應用程序，並且有點混淆爲什麼當我單擊手機工具欄中的後退按鈕時數據正在消失。

這裏的設置：

我有一個觀點，SearchResultsView，看起來像這樣（爲簡潔，刪除Trigger.io代碼）：

window.SearchResultsView = Backbone.View.extend({ 

initialize: function() { 
    this.template = _.template($('#searchResultsView-template').html()); 
}, 

render: function() { 

    var self = this; 
    var renderedContent = this.template(); 
    $(this.el).html(renderedContent); 

    if (window.resultsCollection) { 
     self.drawList(window.resultsCollection); 
    } 

    return this; 
}, 

events: { 
    "click #submitQuery" : "processClick" 
}, 

drawList: function(collection) { 

     collection.each(function(place){ 
      window.console.log(place.get("name")); 
      $("#resultsList").append("<li><a href='#locationdetail/"+place.id+"' class='link'>" + place.get("name") +"</a></li>"); 
     }); 
}, 

processClick: function() { 

    var self=this; 
    this.querystring = $("#searchBox").val(); //get the query 

    window.resultsCollection = new Places(null, {query: this.querystring}); 
    window.resultsCollection.fetch(); //this is fetching via a call to the FourSquare API, and populating the models in the collection with that data 

    window.resultsCollection.bind('reset', function(collection){ 
     self.drawList(collection); 
    }); 
} 

}); 

這裏是模板：

<script type="text/template" id="searchResultsView-template"> 
<div id="searchbar"></div> 
<h1>Results Bitch</h1> 
    <input type="text" id="searchBox"></input> 
    <input type="submit" id="submitQuery"></input> 
    <ul data-role="listview" id="resultsList"> 
    </ul> 
    <a href="locationdetail">Click me</a> 
</script> 

這裏是路由器：

searchresults: function() { 
    this.searchresults = new SearchResultsView({}); 
    $('#container').empty(); 
    $('#container').append(this.searchresults.render().el); 
}, 

下面是它在實踐中的工作方式：當我最初加載頁面時，沒有結果列表（因爲它應該是）。我輸入查詢並執行搜索，然後它返回，按照它應該填充列表。然後，我點擊一個項目進入另一個視圖，當我點擊「返回」時，列表又是空的。

我想要做的是測試以查看集合是否仍然存在，如果存在，請繼續並重新呈現列表，但它永遠不會呈現列表。集合存在，因爲我可以將其記錄到控制檯並查看數據。

我懷疑#resultsList元素尚不可用，所以當它追加結果給它時，它找不到它，因此沒有顯示任何東西。

所以：

• 這聽起來是正確的？
• 爲什麼？當事情正常時，這與初始負載有何不同？

希望我很清楚。我沒有包含模型和集合，以保持簡短。如果這些將有所幫助，我很樂意將它們包括在內（儘管我傾向於認爲這是一個觀點問題）。

謝謝！

Answer 1

問題在於您在調用方法中附加渲染視圖的方式。

在下面的路由器方法

searchresults: function() { 
     this.searchresults = new SearchResultsView({}); 
     $('#container').empty(); 
     $('#container').append(this.searchresults.render().el); 
    }, 

你應該首先重視的初始化視圖的EL在父視圖中的元素，然後使其。

這是必要的，因爲有時子視圖可能會搜索創建的html中的html元素並將其附加在它自身內（如您的情況）。如果視圖在渲染前未附加，則渲染時創建的html實際上不會成爲windows.document的一部分，因此無法搜索（它只是在內存中）。

在你的情況下，你正在嘗試搜索一個尚未包含在window.document中的元素。

var SearchResultsView = Backbone.View.extend({ 
    ... 
     drawList: function(collection) { 
       collection.each(function(place) { 
        window.console.log(place.get("name")); // this proves the collection is still here. But, it's not rendering? Because the DOM isn't finished rendering yet? 
        $("ul#resultsList").append("<li><a href='#locationdetail/" + place.id + "' class='link'>" + place.get("name") + "</a></li>"); 
       }); 
      }, 
... 
}); 

以下更改應該解決問題。

searchresults: function() { 
       this.searchresults = new SearchResultsView({}); 
       $('#container').empty(); 
       $('#container').append(this.searchresults.el); 
       this.searchresults.render(); 
      }, 

SearchResultsView的el現在是window.document的一部分。在視圖中創建並附加的任何html也是window.document的一部分，可供搜索。

這裏是我寫的骨幹代碼基於你的代碼的示例工作html文件。

http://jsfiddle.net/venkat_kotra/rHWPL/