Question

我在之前版本的Ember中看到过这项工作，但我无法在1.8版本中使用它

我希望索引控制器中的 addNewView 方法创建并添加新的 App.ReusableView ，并将其指定的模板作为DOM div的元素。我尝试了几种组合，但没有使用这个ember版本。

或者，我是否接近这个错误并使用{{#each}}模板从模型中读取并让控制器只是向控制器添加元素？

jsbin： http://jsbin.com/xidoqo/1/edit?html,js,console,output

错误

Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.

的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Playground Ember</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-v3.1.1.min.css">
</head>
<body>

  <script type="text/x-handlebars">
    <h2>main page</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="index">
    <button {{action 'addNewView'}}>addNewView</button>
    <div id='divHolderId'></div>
  </script>

  <script type='text/x-handlebars' data-template-name='reusable'>
    my reusable view content
  </script>

  <script src="js/libs/jqueryv1.11.0.min.js"></script>
  <script src="js/libs/bootstrapv3.1.1.min.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-1.8.1.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

app.js

App = Ember.Application.create();

App.IndexController = Ember.Controller.extend({
  actions: {
    addNewView: function() {
      console.log('addNewView called');
      var view = App.ReusableView.create();
      view.appendTo('#divHolderId'); // error: 
    }
  }
});

App.ReusableView = Ember.View.extend({
  templateName: 'reusable'
});

edit1：（也尝试使用相同的错误实例化ContainerView）

addNewView: function() {
  console.log('addNewView called');
  var container = Ember.ContainerView.create({
    childViews: [App.ReusableView.create()]
  });
  container.appendTo('#divHolderId');
}

Answer 1

你有没有检查过组件？您所描述的内容非常类似于我们在组件存在之前在Ember中执行操作的方式，并且它非常笨拙且容易出错。

我不确定您的具体用例，但我会有一个表示您的观点的上下文的数组，单击addNewView只会将上下文推送到数组。在您的模板中：

{{#each thing in contexts}}
  {{my-new-component thing}}
{{/each}}

Answer 2

如果你绝对必须使用观点，那么这将有效：http://jsbin.com/zufomiweqe/2/edit

虽然有点奇怪，Ember.ContainerView的API在实施时并没有真正得到太多的爱。其中一个不好的事情是，ContainerView上要触发的所有操作都必须通过view.parentView触发，因为子视图无法直接访问ContainerView＆＃39;的背景。

尝试一下，但是，我希望它能为你效劳： - ）

在ember 1.8版中为DOM创建和添加新的Ember View元素

2 个答案: