Question

快速说明：

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

如果以后这个变得过时，我使用的是带有Handlebars 1.3.0的Ember 1.7.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视图将是一个更好的用户体验。

Answer 1

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

视图在需要时被实例化并呈现，并在完成时被拆除。

为什么你有一个3000元素的下拉列表呢？

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

Answer 2

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

使用＆＃34;部分＆＃34;将允许您使学校模板独立于报告，从而删除报告不会影响学校。

请确保正确定义插座和部分。

希望它有所帮助！

如何防止在Ember.js中销毁视图

2 个答案: