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

Solution 1:

Each view in ember have a template, for example:

foo_view.js

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

foo template

<scripttype="text/x-handlebars"data-template-name="index"><divid=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

<scripttype="text/x-handlebars"data-template-name="index"><divid=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

Solution 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.