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:

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>

Marcio Junior Marcio Junior · Accepted Answer · 2013-12-10T14:47:02

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

emberjs append works but raises Assertion Failed error

2 Answers