Question

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

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

示例HTML：让我们说我想渲染两个列表，一个在＆＃34; left-container＆＃34; 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>
...

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

2 个答案: