emberjs append works but raises Assertion Failed error

Question

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:

Asserti         


        

Answer 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

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