如何在 Ember.js 中防止视图被破坏答案

【问题标题】：How to prevent views from being destroyed in Ember.js如何在 Ember.js 中防止视图被破坏
【发布时间】：2014-09-11 12:52:53
【问题描述】：

快速说明：

我不相信这是Ember.js: Prevent destroying of views 的重复。我发现的其他相关问题已过时。

如果以后它变得过时，我将 Ember 1.7.0 与 Handlebars 1.3.0 一起使用。

问题的背景：

正如标题所述，我想知道如何在不破坏视图的情况下在视图之间进行转换。使用queryParams 并没有解决我的问题。

我正在创建一个具有以下嵌套视图的计算器：

>>Calculator View
    >>Report View (hasMany relationship to Calculator)
      --School Partial (I am using queryParams here)

我可以在Report 视图之间导航，而不会破坏我的School 部分，因为我使用queryParams 并使用displaySchoolPartial 布尔值来显示/隐藏部分。下面的例子：

报告模板（仅显示基本部分）：

<script type="text/x-handlebars" data-template-name="calculator/report">
    ...
    {{#link-to "calculator.report" (query-parameters displaySchoolPartial="true")}}
    {{render "_school"}}
</script>

学校模板（也精简了）：

<script type="text/x-handlebars" data-template-name="_school">
    {{#with controllers.calculatorReport}}
    <div {{bind-attr class=":schoolPartialWrapper displaySchoolPartial::hide-element"}}>
        ...
    </div>
    {{/with}}
</script>

这按预期工作。如前所述，在不同的 Report 视图和 School 部分视图之间导航不会破坏视图。

问题：

导航到Calculator 视图时出现问题，Report 视图被破坏，然后我的School 视图被破坏。我不想也使用queryParams 来替换我的Report 视图。

我需要确保视图不会被破坏的原因是因为我的School 部分中有一个包含 3,000 所学校的选择框。重新渲染它需要很长时间。简单地显示/隐藏Report 视图会是一个更好的用户体验。

【问题讨论】：

标签： ember.js

【解决方案1】：

不要与 Ember 战斗。你会输的。

视图在需要时被实例化和渲染，并在完成时被拆除。

为什么你有一个包含 3000 个元素的下拉菜单？

如果您真的非常想这样做，我的建议是在您的应用程序页面上放置一个{{render}}，然后将其隐藏。该视图将在应用程序启动时创建并呈现，并且只要应用程序处于活动状态就一直存在。然后，在视图的didInsertElement 中，对该隐藏元素执行cloneNode 并将其插入到视图的DOM 中某处。您可能不得不费力地让事件处理程序正确连接。

【讨论】：

我 100% 同意你的第一句话。我已经改变了我的实现。出于好奇，我现在只是想知道。
关于{{render}} 的使用，我已经将它用于School 部分。如果我将它用于Report 部分，我将如何定义路线？如果它在通常的App.Router.map 函数中，它就可以工作吗？

【解决方案2】：

我的建议不是使用“render”而是使用“partial”，所以你只需要放入你想要的模板。有一个通过 css 类设置显示/隐藏的控制变量。并使用您的控制器控制该变量。

使用“部分”将允许您拥有独立于报告的学校模板，因此删除报告不会影响学校。

只要确保正确定义了出口和部分。

希望对你有帮助！

【讨论】：