返回时未渲染主干集合

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

它在实践中是这样工作的：当我最初加载页面时，没有结果列表（应该是这样）。我输入查询并执行搜索，然后它会回来，按照它应该的方式填充列表。然后，我会点击一个项目去另一个视图，当我点击“返回”时，列表又是空的。

我试图做的是测试集合是否仍然存在，如果仍然存在，继续重新呈现列表，但它永远不会呈现列表。集合确实存在，因为我能够将其记录到控制台并查看数据。

我的怀疑是，目前还不可用，所以当它将结果附加到它时，它找不到它，因此没有显示任何内容。

所以：

• 这听起来对吗

希望我足够清楚。我没有包括模型和收藏，以保持简短。如果这些有帮助，我很乐意包含它们（尽管，我倾向于认为这是一个观点问题）。

谢谢

Answer 1

问题是在调用方法中附加呈现的视图的方式。

在下面的路由器方法中

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

您应该首先将初始化视图的el附加到父视图中的元素，然后呈现它。

这是必要的，因为有时子视图可能会在它自己创建并附加的html中搜索html元素（如您的情况）。如果在渲染之前未附加视图，则在渲染时创建的html实际上不会成为窗口的一部分。文档，因此不可搜索（仅在内存中）。

在您的例子中，您正在尝试搜索尚未成为窗口一部分的元素。文件

 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现在是窗口的一部分。文件在视图中创建和附加的任何html也是窗口的一部分。文档和可搜索。

下面是我根据您的代码编写的带有主干代码的示例工作html文件。

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