Ember.js 在静态 HTML 中渲染多个视图

Question

我是 Ember 的新手，我一直在尝试渲染视图。 上下文中的应用程序不是单页应用程序，但到目前为止，Ember 一直很好，直到我开始处理视图。

我试图在单个页面上呈现多个视图（这就像一个仪表板，有大量静态 HTML 和一些容器，每个视图一个）。

示例 HTML： 假设我想渲染两个列表，一个在“左容器”div 内，另一个在右容器内。

<div class="static-header></div>
<!-- more static content goes here -->
<div id="left-container"></div>
<!-- more static content goes here -->
<div id="right-container"></div>
...

我尝试使用 appendTo 方法（在 Ember 指南的 Defining a View 部分中描述）创建不同的视图并插入它们，但它会引发错误：

查找视图模板时找不到容器。这很可能是由于手动实例化了 Ember.View。见：http://git.io/EKPpnA

我无法使用它指向的链接找到我的方式。

Ember 代码：

var App = Ember.Application.create({});
App.HomeViewLeft = Ember.View.extend({    
    templateName: 'home-left',
});

var view = App.HomeViewLeft.create();
view.appendTo('#left-container');

我也尝试过使用 Ember api docs 中描述的 ContainerView：

App.HomeViewLeft = Ember.View.extend({    
    templateName: 'home-left',
});

var containerView = Ember.ContainerView.create({
classNames: ['container-view'],
});

containerView.pushObject(App.HomeViewLeft.create());
containerView.appendTo('left-container');

但我得到了同样的错误。

我应该如何分别在#left-container 和#right-container 中渲染每个视图？ 提前致谢。

Answer 1

模板：

<div id="here"></div>

<script type="text/x-handlebars" data-template-name="components/my-foo">
  {{text}}
</script>

JS：

App = Ember.Application.create({});

Ember.Application.initializer({
  name: 'stand-alone-components',

  initialize: function(container, application) {
    App.MyFooComponent.create({text: 'Hello World', container: container}).appendTo('#here');
  }
});

App.MyFooComponent = Ember.Component.extend({
  init: function() {
    this._super();
    this.set('layout', Ember.TEMPLATES['components/my-foo']);
  }
});

http://emberjs.jsbin.com/nekowidera/1/edit?html,js,output

Answer 2

您似乎正在尝试使视图的行为类似于 partials

将任何静态内容移动到部分中，并将其包含在您的主模板中，如下所示：

{{partial "header"}}

您要呈现的列表可以转换为component（如果其中唯一改变的是数据）。

所以你最终会得到一个包含部分和组件的视图：

<div class="static-header>{{partial "header"}}</div>
{{partial "static-content"}}
<div id="left-container">{{list-component data=firstList}}</div>
{{partial "static-content"}}
<div id="right-container">{{list-component data=secondList}}</div>
...