Backbone.Marionette - How to add static html content in template using CompositeView?

Question

I am new with Marionette. I came to know about the Marionette composite view. I don't know whether i am wrong or write.

my question is, how can i keep some static html content on my template?

my composite view template:

<script type="text/template" id="angry_cats-template">
        <div><a href="#logout">Click to logout</a></div> // i would like to add some static html here.
        <thead>
            <tr class='header'><th>Name</th></tr>
        </thead>
        <tbody></tbody>
    </script>
    <script type="text/template" id="angry_cat-template">
        <td><%= name %></td>
    </script> 

And I am rendering like this:

myApp = new Backbone.Marionette.Application();

      myApp.addRegions({
        mainRegion:"#content"
      });

      AngryCat = Backbone.Model.extend({});

      AngryCats = Backbone.Collection.extend({
          model:AngryCat
      });

      AngryCatView = Backbone.Marionette.ItemView.extend({
          template:"#angry_cat-template",
          tagName:'tr',
          className:'angry_cat'
      });

      AngryCatsView = Backbone.Marionette.CompositeView.extend({
          tagName:"table", //how to avoid my logout should  not append with table?
          id:"angry_cats",
          className: "table-striped table-bordered",
          template: "#angry_cats-template",
          itemView: AngryCatView,
          appendHtml: function(collectionView, itemView){
              collectionView.$("tbody").append(itemView.el);
          }
      });

      myApp.addInitializer(function(options){


          var cats = new AngryCats([
              { name: 'Wet Cat' },
              { name: 'Bitey Cat' },
              { name: 'Surprised Cat' }
          ]);

          var angryCatsView = new AngryCatsView({
              collection: cats
          });

             myApp.mainRegion.show(angryCatsView);

      });

      $(document).ready(function(){

          myApp.start();
      });

Any one help me?

Live Demo

Answer 1

You have to remove the className and tagName from CompositeView and update the composite template as follows

   <div><a href="#logout">Click to logout</a></div> // Now i am out.
    <table class="table-striped table-bordered">
      <thead>
        <tr class='header'><th>Name</th></tr>
      </thead>
      <tbody></tbody>
   </table>

Moreover you do not need to have appendHtml in the CompositeView. Instead simple set itemViewContainer: "tbody" in which item view will be appended.

Please check out http://jsfiddle.net/fizerkhan/y6nH5/

Answer 2

Your error may be in the AngryCatsView appendHtml: function().
You should not need this function.
To Specify a div for Marionette to render child elements into, use

itemView: AngryCatView
itemViewContainer: "tbody"

I have written a tutorial style blog on using Marionette in TypeScript.