creating and adding new Ember View elements to the DOM in ember version 1.8

Question

I have seen this work in previous versions of Ember but I cannot get it to work in version 1.8

I would like the addNewView method in the index controller to create and add new App.ReusableView with its designated template as an element to the DOM div. I have tried several combinations and none work with this ember version.

OR, am I approaching this wrong and have the template using an {{#each}} to read from a model and have the controller just add elements to the controller?

jsbin: http://jsbin.com/xidoqo/1/edit?html,js,console,output

error

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

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Playground Ember</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-v3.1.1.min.css">
</head>
<body>

  <script type="text/x-handlebars">
    <h2>main page</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="index">
    <button {{action 'addNewView'}}>addNewView</button>
    <div id='divHolderId'></div>
  </script>

  <script type='text/x-handlebars' data-template-name='reusable'>
    my reusable view content
  </script>

  <script src="js/libs/jqueryv1.11.0.min.js"></script>
  <script src="js/libs/bootstrapv3.1.1.min.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-1.8.1.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

app.js

App = Ember.Application.create();

App.IndexController = Ember.Controller.extend({
  actions: {
    addNewView: function() {
      console.log('addNewView called');
      var view = App.ReusableView.create();
      view.appendTo('#divHolderId'); // error: 
    }
  }
});

App.ReusableView = Ember.View.extend({
  templateName: 'reusable'
});

edit1: (also tried instantiating a ContainerView with the same error)

addNewView: function() {
  console.log('addNewView called');
  var container = Ember.ContainerView.create({
    childViews: [App.ReusableView.create()]
  });
  container.appendTo('#divHolderId');
}

Do as the error says, use an Ember.ContainerView. emberjs.com/api/classes/Ember.ContainerView.html — givanse
@givanse, I have tried instantiating a ContainerView with my view as a childView but it still doesnt work. please see edit1 snippet in the post — mihai

mpowered mpowered · Accepted Answer · 2014-12-22T20:39:57

Have you checked out components at all? What you're describing feels very much like the way that we did things in Ember before components existed, and it was all very unwieldy and error-prone.

I'm not sure about your specific use-case, but I would have an array that represents the contexts for your views, and clicking addNewView would simply push a context to the array. In your template:

{{#each thing in contexts}}
  {{my-new-component thing}}
{{/each}}

creating and adding new Ember View elements to the DOM in ember version 1.8

2 Answers