1

我有一个我正在使用 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 元素尚不可用，因此当它将结果附加到它时，它找不到它，因此没有显示任何内容。

所以：

  • 这听起来对吗？
  • 为什么？当一切正常时，这与初始负载有何不同？

希望我足够清楚。为了简短起见，我没有包括模型和集合。如果这些有帮助，我很乐意将它们包括在内（尽管，我倾向于认为这是一个观点问题）。

谢谢！

4

1 回答 1

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/

于 2012-07-25T04:58:18.783 回答