在 Backbone 中多次初始化视图答案

【问题标题】：Initializing a View multiple times in Backbone在 Backbone 中多次初始化视图
【发布时间】：2023-03-22 04:00:01
【问题描述】：

我正在 Backbone 中构建一个网站，网站结构类似于 Youtube，因为当您使用页面链接更改页面时，只会重新加载 DOM 的一部分（即非导航组件）整个文档。

因此，当用户使用我网站上的链接访问子页面时，Backbone 将发出 AJAX 调用并接收子页面的 HTML，如下所示：

<section id="SubpageView">...</section>
<script>

// Defines the view that controls #SubpageView.
if(typeof SubpageView !== 'undefined') {

    // If this is the first time the page is loaded, create class.
    var SubpageView = Backbone.Model.extend({
        el: '#SubpageView',
        ...
    });

}

MainView.currentSubpage = new SubpageView();
</script>

多次调用 SubpageView() 有什么缺点（即僵尸视图、内存泄漏等）吗？在我看来，使用 el 而不是 tagName 定义 View 元素似乎是针对您只使用一次的元素。

注意：我知道单页 Web 应用程序通常会将其所有模板烘焙到持久性 DOM 中，并且所有 HTML 都使用客户端模板处理。但是因为我将网站设计为在没有 pushState() 或禁用 Javascript 的情况下降级为传统的服务器端渲染，所以我不想将所有模板烘焙到持久 DOM 中。

【问题讨论】：

可以使用jQuery多次注入View。例如，您在标签“elems”处有 div 元素，并在循环中创建了一个 Views 。 $(".elems").append(yourElem);

标签： javascript backbone.js

【解决方案1】：

这是一个很好的问题 - 我认为很多人忽略了这个问题，它会导致问题。 “僵尸视图”是一个很好的描述符。我会说你是对的，它们可能会导致问题：

您正在维护（可能很大）不再需要的对象实例。
您的僵尸视图实例仍然可以引用仍在使用的现有对象，并可能导致意外行为。

如果您使用 Backbone 的事件哈希，最后一点尤其重要，例如：

events: {
    'click .someButton': 'someMethod',
    // ...
},

由于您正在重用el 选择器（我认为您应该这样做），所有僵尸视图的事件将保持活动状态，并在不应该触发视图的功能时触发。这可能意味着重复行为或其他完全出乎意料的结果。

至于解决方案，我认为您有两种选择：一种是在更新之前销毁旧视图实例。默认的remove 方法实际上删除了您不想要的el...undelegateEvents 可能会有所帮助。 Backbone 并没有一种干净的方式来完成所需的工作，因此您最终会自己编写一些代码。

我认为更好的选择是将现有视图实例与新数据（collection、model、其他实例数据或任何合适的数据）一起重用。

当您更改页面的子视图时，您可能会传入一些变量，例如获取的 html：

$.get('/templates/someView.html', function(html) {
    Mainview.currentSubpage = new SubpageView(html);
});

... 或类似的东西。相反，我建议编写一个方法来更新现有实例，例如：

$.get('/templates/someView.html', function(html) {
    Mainview.currentSubpage.resetPage(html);
});

您将 resetPage 方法写入您的 SubpageView 以执行您需要的操作。当然，这不仅仅适用于传入 html，我只是将其用作示例。

【讨论】：