问题描述
我以前在Ember的版本中看到过这个工作，但是我无法在1.8版本中使用它。
I have seen this work in previous versions of Ember but I cannot get it to work in version 1.8
我希望 addNewView 方法在索引控制器中创建并添加新的 App.ReusableView ，其指定的模板作为DOM div的元素。我尝试了几个组合，没有使用这个ember版本。
I would like the addNewView method in the index controller to create and add new App.ReusableView with its designated template as an element to the DOM div. I have tried several combinations and none work with this ember version.
或者，我接近这个错误，并使用{{#each}}的模板从一个模型，并且控制器只是添加元素到控制器？
OR, am I approaching this wrong and have the template using an {{#each}} to read from a model and have the controller just add elements to the controller?
jsbin：
错误
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） / p>
edit1: (also tried instantiating a ContainerView with the same error)
addNewView: function() {
console.log('addNewView called');
var container = Ember.ContainerView.create({
childViews: [App.ReusableView.create()]
});
container.appendTo('#divHolderId');
}
推荐答案
如果您绝对必须使用视图那么这将会起作用：
If you absolutely must use views, then this will work: http://jsbin.com/zufomiweqe/2/edit
尽管如此， Ember.ContainerView 的API并没有真正获得太多的爱被实施。其中一个坏的事情是，必须通过 view.parentView 触发在 ContainerView 上触发的任何操作，因为子视图不能直接访问 ContainerView 的上下文。
It's a little strange, though, the Ember.ContainerView's API didn't really get too much love when it was implemented. One of the bad things is that any actions to be triggered on the ContainerView have to be triggered via view.parentView, since the child views don't directly have access to the ContainerView's context.
尽管如此，我希望它适用于你： - ）
Try that out, though, I hope it works out for you :-)
这篇关于在Ember 1.8版本中创建并添加新的Ember View元素到DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！