在 Ember版本 1.8 中创建新的 Ember View 元素并将其添加到 DOM 中

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

我希望索引控制器中的addNewView方法创建并添加新的App.ReusableView及其指定的模板作为DOMdiv的元素。我已经尝试了几种组合，但没有一种适用于此余烬版本。

或者，我是否处理错了，并使用 {{#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.

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

应用.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：(也尝试实例化具有相同错误的容器视图(

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

如果您绝对必须使用视图，那么这将起作用： http://jsbin.com/zufomiweqe/2/edit

不过，这有点奇怪，Ember.ContainerView的API在实现时并没有真正得到太多的喜爱。一个不好的事情是，任何在ContainerView上触发的操作都必须通过view.parentView触发，因为子视图不能直接访问ContainerView的上下文。

不过，请尝试一下，我希望它对您有用：-(

您是否检查过组件？你所描述的感觉非常像我们在组件存在之前在 Ember 中做事的方式，而且这一切都非常笨拙且容易出错。

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

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

相关内容

最新更新

热门标签：