How do I append a view to a div inside of a view?

Question

I am trying to append a view to a placeholder div by id, in line with the answer here: How can I dynamically insert a new template into the DOM with Ember?.

insertInfoBox:function (context) {
    var infoBoxView = App.LocatorInfoBox.create({
        context:context
    });

    infoBoxView.appendTo('#infoBoxHolder');
},

I get the following error: Uncaught Error:

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

The 'infoBoxHolder' div is nested within another view, but is not itself a view. If I set up infoBoxView as a child of the parentView (if I changed the parent to a container view), I'm unclear on how to insert the view into the child div 'infoBoxHolder' and not directly into the parent container view's root element.

Joachim H. Skeie Joachim H. Skeie · Accepted Answer · 2012-12-07T18:14:28

I am not sure why you would want to do this, but you can use the didInsertElement function. Something like:

App.MyView = Ember.View.extend({
    didInsertElement: function() {
        $('#elementId').append(...);
    }
});

The way I would do it would be through a template, something like:

App.MyView = Ember.View.extend({
    template: Ember.Handlebars.compile('{{#if someCondition}}{{MyApp.MyOtherView valueBInding="..."}}{{/else}}');
});

How do I append a view to a div inside of a view?

1 Answers