emberjs append works but raises Assertion Failed error

问题:

I'm new to ember I am trying to append a template to another and it seems to work but it raises an error, can you please explain why?

The error:

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

This is the code in app.js

App.NewStickie = Ember.View.extend({   click: function(evt){     var stickie = Ember.View.create({         templateName: 'stickie',         content: 'write your notes here'     });     stickie.appendTo('#stickies');   } }); 

These are the contents of index.html

<script type="text/x-handlebars">     {{#view App.NewStickie}}       <button type="button" class="btn btn-success">         New       </button>     {{/view}}     {{outlet}}   </script>    <script type="text/x-handlebars" id="index">     <div id="stickies">       {{#each item in model}}         <div class="stickie" contenteditable="true">           {{#view App.DeleteStickie}}             <span class="glyphicon glyphicon-trash"></span>           {{/view}}           <div contenteditable="true">             {{item.content}}           </div>         </div>       {{/each}}     </div>   </script>    <script type="text/x-handlebars" data-template-name="stickie">     <div class="stickie">       {{#view App.DeleteStickie}}         <span class="glyphicon glyphicon-trash"></span>       {{/view}}       <div contenteditable="true">         {{view.content}}       </div>     </div>   </script> 

回答1:

Each view in ember have a template, for example:

foo_view.js

App.FooView = Ember.View.extend({   templateName: 'foo' }) 

foo template

<script type="text/x-handlebars" data-template-name="index">      <div id=myFooView>Foo</div> </script> 

You are trying to insert a view inside of other in that way:

App.BarView.create().appendTo('#myFooView') 

This isn't allowed. You can use the {{view}} handlebars helper to render a view inside other like that:

foo template

<script type="text/x-handlebars" data-template-name="index">      <div id=myFooView>     Foo     {{view App.BarView}}   </div> </script> 

But I think that you want this working dynamically. So you can use the ContainerView, like described by the error message:

App.StickiesView = Ember.ContainerView.extend({   click: function() {     var stickie = Ember.View.create({         templateName: 'stickie',         content: 'write your notes here'     });     this.pushObject(stickie);   } }) 

I see in your code a lot of views with the click event, ember encourage you to use actions, this give more flexibility, error/loading handling etc. I think is a good idea to use it.

I hope it helps

回答2:

You should probably read this guide that explains that ContainerView is. Also, I don't think it's necessary to create another View to append a template to another template.

文章来源: emberjs append works but raises Assertion Failed error