Ember.js在DOM中添加和删除视图?

Joa*_*eie 7 ember.js

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

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

当用户启动应用程序时,会显示类似仪表板的用户界面.从这里,用户可以搜索或点击案例,以便提出这种情况.此时我想做以下事情:

  • 我想删除仪表板的GUI,我想展示案例的GUI - 这本身就是一个复杂的GUI,有自己的一套导航规则等.
  • 此外,在我想要在用户导航和操作案例时添加和删除部分GUI的情况下.
  • 当用户点击"Dashboard"链接时,我希望删除当前的GUI,并再次添加仪表板.

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

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

Mar*_*ten 9

警告:过时的答案

一个视图继承从中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');
Run Code Online (Sandbox Code Playgroud)

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

// remove from DOM
App.partsView.remove();
Run Code Online (Sandbox Code Playgroud)

该文档在构建视图层次结构方面有很好的作用,稍后将Ember.ContainerView根据您是否要以编程方式执行所有操作.