Backbone.Marionette - 如何使用CompositeView在模板中添加静态HTML内容？

Question

我是Marionette的新人。我开始了解木偶复合视图。我不知道我是错的还是写的。

我的问题是，我如何保持我的模板上的一些静态HTML内容？

我复合视图模板：

<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> 

而且我渲染这样的：

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

任何一个帮助我吗？

Live Demo

Answer 1

你必须删除CompositeView的className和tagName和更新复合模板如下

<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> 

而且你不需要有appendHtml在CompositeView中。取而代之的是简单的设置itemViewContainer: "tbody"，其中将添加项目视图。

请检查出http://jsfiddle.net/fizerkhan/y6nH5/

Answer 2

你的错误可能是在AngryCatsView appendHtml：（）函数。
你不应该需要这个功能。
要指定一个div的木偶来渲染子元素进入，使用

itemView: AngryCatView 
itemViewContainer: "tbody" 

我已经写上using Marionette in TypeScript的教程式的博客。