如何防止在Ember.js被破坏的观点

我不相信这是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部分中有3000个学校的选择框。重新渲染它需要很长的时间。简单地显示/隐藏Report视图将会是一个更好的用户体验。

来源

2014-09-11 jperezov

我的建议是不使用“渲染”，而是使用“部分”，所以你只需要放入你想要的模板。有一个控制变量设置显示/隐藏通过CSS类。并使用你的控制器来控制这个变量。

使用“部分”将允许你有独立于报告的学校模板，从而移除报告不会影响学校。

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

希望它有帮助！

来源

2014-09-12 07:30:08 LanNguyen

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

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

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

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

来源

2014-09-12 08:02:49

我同意你的第一句话100％。我已经改变了我的实现。我只是想出于好奇而想知道。 – jperezov 2014-09-12 11:51:33

尽管关于“{{render}}”的使用，我已经在'School'部分使用了它。如果我将它用于“Report”部分，我将如何定义路线？它是否在通常的'App.Router.map'函数中工作？ – jperezov 2014-09-12 11:52:36

如何防止在Ember.js被破坏的观点

回答

相关问题