Question

我有一个我正在使用Trigger.io构建的Backbone应用程序，当我点击手机工具栏中的后退按钮时数据消失的原因有点混乱。

以下是设置：

我有一个看起来像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/

返回时Backbone Collection无法呈现

1 个答案: