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的教程式的博客。