Ember.js 在 DOM 中添加和删除视图？答案

【问题标题】：Ember.js adding and removing views from the DOM?Ember.js 在 DOM 中添加和删除视图？
【发布时间】：2012-01-10 00:38:43
【问题描述】：

在使用 SproutCore 1 之后，我正在研究 ember.js。我正在寻找一些关于如何在用户导航应用程序时从 DOM 中添加和删除视图的示例。

例如，我有一个包含一组案例的应用程序，每个案例都有一个工作流程。还有管理页面等。

当用户启动应用程序时，会显示一个类似于仪表板的用户界面。用户可以从这里搜索或单击案例以调出该案例。此时我想做以下事情：

我想删除仪表板的 GUI，我想显示案例的 GUI - 它本身就是一个复杂的 GUI，有自己的导航规则集等。
此外，在案例中，我想在用户导航和操作案例时添加和删除部分 GUI。
当用户单击“仪表板”链接时，我希望删除当前的 GUI，并重新添加仪表板。

由于这将是一个有点大的应用程序，我不确定切换 isVisible 参数是否足够，或者是否需要采取其他措施以免用户浏览器过载。

是否有说明如何执行此操作的指南或示例？

【问题讨论】：

你应该看看ember-states的代码。
ud3323：谢谢，我有，但这留下了两个问题：1. 我如何添加和删除 childView，以及 2. 我在代码中的哪个位置说 MyApp.statemanager.create() ？将该代码放入 Ember.Application.create({ready: function({ //here })}); 中，似乎在我的 index.html 中创建的视图之前加载状态图。
旧的 SC 1.x 状态图和新的 ember-states 之间的最大区别之一是 ViewStates。基本上它处理状态图中视图的添加/删除。至于您的其他问题，当您调用 Ember.StateManager.create 时，它应该初始化状态图并为您输入初始状态。
我刚刚注意到 ViewStates，就在阅读此评论之前，我必须说，它们确实非常好！如果其他人正在寻找如何使用它们，我发现了这个 JSFiddle：jsfiddle.net/pangratz666/Y7dqt
@Rajat 我更新了你的 jsFiddle：jsfiddle.net/joachimhs/GyZgy/4 这是你要问的吗？

标签： ember.js

【解决方案1】：

警告：过时的答案

视图继承自Ember.View，这意味着它获得了一些关键方法。 append()，附加到body，appendTo(arg) 接受一个参数和remove()。

参数是一个 jQuery 样式选择器，用于在 DOM 中插入元素的位置。

// my view
App.PartsView = Ember.View.extend({
    ...
});


// create/insert my view
App.partsView = App.PartsView.create();
App.partsView.appendTo('#partcontainer');

在我的代码中，我有一个<div id="partcontainer"></div>。

// remove from DOM
App.partsView.remove();

该文档在 Building a View Hierarchy 上有一个很好的部分，然后在 Ember.ContainerView 上有一个部分，这取决于您是否希望以编程方式完成所有操作。

【讨论】：

jQuery 文档提供了一个overview of available jQuery selectors。
问题：应该这样做吗？用 Ember 做事的方式似乎有点不正常。
好问题。大约两年前我写了这篇文章，当时 emberjs 还“未完成”，而且我还没有及时了解现在正在发生的事情。我的回答可能已经过时了。
是的，遗憾的是它已经过时了。我已经发布了特定版本的 ember 1.8 stackoverflow.com/questions/27597066/… 的问题
我添加了一个不是关于它已过时