Marionette CompositeView not rendering recursively

Question

I am trying to cause Marionette's CompositeView to render recursively by not specifying a childView. jQuery is giving me the following error:

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

Here is the template I'm using in my HTML. I know it will come out ugly. I don't care. I'm just trying to get CompositeView to render recursively (i.e. using the same template to print out everything in the Collection without using a childView).

<script type="text/template" id="table-tpl">
  <table border="1">
    <thead>
      <tr>
        <th>Book Title</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <footer><p><%- title %></p></footer>
</script>

Here is my Javascript

// Working with Collections example
var App = new Marionette.Application();

// Create Model
App.Book = Backbone.Model.extend();

// Create ItemView
App.BookView = Marionette.ItemView.extend({
  template: "#row-tpl",
  tagName: "tr"
});

// Create a Collection
App.Library = Backbone.Collection.extend({
  model: App.Book
});

// Create a CompositeView
App.BookShelf = Marionette.CompositeView.extend({
  // childView: App.BookView,
  // childViewContainer: "tbody",
  template: "#table-tpl",
  el: '.target'
});

// What should happen on Start
App.on("start", function(){

  // Instantiate some Models
  App.book1 = new App.Book({title: 'Grapes of Wrath'});
  App.book2 = new App.Book({title: 'Who moved my Cheese'});
  App.book3 = new App.Book({title: 'The Alchemist'});
  App.book4 = new App.Book({title: 'Great Books'});

  // Instatiate and populate the Collection
  App.library = new App.Library([App.book1, App.book2, App.book3]);

  // Instatiate the CompositeView
  App.bookshelf = new App.BookShelf({
    // Model is available in template
    model: App.book4,
    // But the CompositeView will loop through collection
    collection: App.library
  });

  // Render the CollectionView
  App.bookshelf.render();

  alert('When book1 is removed from the library, it will be removed from the DOM');
  App.library.remove(App.book1);
});

App.start();

score 0 · Answer 1 · answered Nov 30 '15 at 23:49

Try moving your el out of the definition and down into

// Instatiate the CompositeView
App.bookshelf = new App.BookShelf({
  // Model is available in template
  model: App.book4,
  // But the CompositeView will loop through collection
  collection: App.library,
  el: '.target'
});

I think the issue is that you're recursively setting the el to the same element such that it is appending and attempting to replace the childViewContainer with the parent node.

Marionette CompositeView not rendering recursively

1 Answers1