ember.js - 如何防止 View 在 Ember.js 中被破坏

Question

快速说明:

我不认为这是 Ember.js: Prevent destroying of views 的副本.我发现的其他相关问题已过时。

以防以后这变得过时，我正在使用 Ember 1.7.0 和 Handlebars 1.3.0。

---

问题的背景:

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

我正在创建一个具有以下嵌套 View 的计算器:

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

我可以在 Report View 之间很好地导航，而不会破坏我的 School 部分，因为我正在使用 queryParams 并使用 displaySchoolPartial 显示/隐藏部分的 bool 值。示例如下:

报告模板(已剥离，仅显示重要部分):

<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 View 和 School 部分之间导航不会破坏 View 。

---

问题:

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

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

Answer 1

不要和 Ember 打架。你会输的。

View 在需要时实例化和呈现，完成后销毁。

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

如果您真的非常想这样做，我的建议是在您的应用程序页面上放置一个 {{render}} 并将其隐藏。应用程序启动时将创建和呈现 View ，并在应用程序处于事件状态时持续存在。然后，在 View 的 didInsertElement 中，对该隐藏元素执行 cloneNode 并将其插入 View 的 DOM 某处。您可能不得不设法正确连接事件处理程序。