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

您必须从className中删除tagName和CompositeView并按如下方式更新复合模板

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

此外，您不需要在CompositeView中拥有appendHtml。而是简单的设置itemViewContainer: "tbody"，其中将附加项目视图。

请查看http://jsfiddle.net/fizerkhan/y6nH5/

Answer 2

您的错误可能出在AngryCatsView appendHtml：function（）中你不应该需要这个功能要为Marionette指定div以呈现子元素，请使用

itemView: AngryCatView
itemViewContainer: "tbody"

我在using Marionette in TypeScript上写了一个教程风格的博客。

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

2 个答案: