Ember.js在静态HTML中呈现多个视图

Question

我是新来的安博，我被困在试图渲染视图。上下文中的应用程序不是一个单一的页面应用程序，但到目前为止，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指南的定义视图部分中对此进行了描述)，但是它引发了错误：

在查找视图模板时找不到容器。这很可能是手工实例化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');

我也尝试过使用ContainerView，如Ember文档中所描述的

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');

但我也犯了同样的错误。

我应该如何在#左容器和右容器内分别呈现每个视图？提前谢谢。

Answer 1

模板：

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

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

联署材料：

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

看起来您正在尝试使视图的行为像部分数一样。

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

{{partial "header"}}

您希望呈现的列表可以转换为组件 (如果其中唯一更改的是数据)。

因此，您将得到一个包含部分和组件的单一视图：

<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>
...