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

Question

I am new to Marionette. I learned about the compositional presentation of Marionette. I do not know if I am mistaken or writing.

My question is: how can I save some static html content on my template?

my composite 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 do the following:

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();
      });

Does anyone help me?

Live demo

Answer 1

You need to remove classNameand tagNamefrom CompositeViewand 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>

In addition, you do not need to have appendHtmla CompositeView. Instead, simply set itemViewContainer: "tbody"in which the item view will be added.

, http://jsfiddle.net/fizerkhan/y6nH5/

Answer 2

AngryCatsView appendHtml: function().
.
div Marionette ,

itemView: AngryCatView
itemViewContainer: "tbody"

Marionette TypeScript.