Backbone.js 返回时未渲染主干集合

我正在用Trigger.io构建一个主干应用程序，当我单击手机工具栏上的后退按钮时，我有点困惑为什么数据会消失

以下是设置：

我有一个视图SearchResultsView，看起来像这样（为了简洁起见删除了Trigger.io代码）：

实际上它是这样工作的：当我最初加载页面时，没有结果列表（应该是这样的）。我输入查询并执行搜索，然后它返回，按原样填充列表。然后，我将单击一个项目转到另一个视图，当我单击“上一步”时，列表再次为空

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

我怀疑#resultsList元素还不可用，因此当它将结果附加到它时，它找不到它，因此没有显示任何内容

因此：

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

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

---

谢谢

问题在于在调用方法中附加渲染视图的方式

在下面的路由器方法中

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

SearchResultsView的el现在是window.document的一部分。在视图中创建和附加的任何html也是window.document和searchable的一部分

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

---

问题在于在调用方法中附加渲染视图的方式

在下面的路由器方法中

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

SearchResultsView的el现在是window.document的一部分。在视图中创建和附加的任何html也是window.document和searchable的一部分

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

---

谢谢你，文卡特。我在上面的代码中添加了模板和路由器。你能帮我看看我们的代码之间的区别吗？我在代码中添加了一个JSFIDLE:。你可以看到问题所在。您可以搜索、获取项目列表，然后单击以查看该项目。然后，当您单击“返回结果”时，列表不会填充。谢谢Venkat。我在上面的代码中添加了模板和路由器。你能帮我看看我们的代码之间的区别吗？我在代码中添加了一个JSFIDLE:。你可以看到问题所在。您可以搜索、获取项目列表，然后单击以查看该项目。然后，当您单击“返回结果”时，列表不会填充。

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