Question

我正在尝试创建一个复合视图来构建一个表，每个表行都作为子视图。我想在每个子视图中有两个表行。木偶复合视图将我的孩子视图包装在我不想要的空div中。我该如何实现这一目标？我知道我可以使用＆＃34; id＆＃34;视图的属性并使用<tr>呈现表格行，但在这种情况下，我有两个＆＃39; tr＆＃39; childView中的条目。

HTML tempate：

<script id="row-template" type="text/html">
  <tr>
      <td><%= product %></td>
      <td><%= price %></td>
      <td><%= discount %></td>
   </tr>
   <tr>
      <td id="secret"><%= hiddenCode %></td>
   </tr>
</script>

<script id="table-template" type="text/html">
  <table>
    <thead>
      <tr>
        <th>Laptop Name</th>
        <th>Price</th>
        <th>Discount</th>
      </tr>
    </thead>

    <tbody></tbody>
  </table>
</script>

<div id="result"></div>

使用Javascript：

var myData = [{product: "Dell", price: "500$", discount: "30%", hiddenCode: "OFFER20"},
             {product: "Acer", price: "400$", discount: "50%", hiddenCode: "OFFER70"},
             {product: "Apple", price: "2020$", discount: "10%", hiddenCode: "NoOFFER"},
             {product: "HP", price: "700$", discount: "30%", hiddenCode: "FREE"},
             {product: "Lenevo", price: "200$", discount: "40%", hiddenCode: "NoOFFER"}];
var RowCollection = Backbone.Collection.extend({});
var rowCollection = new RowCollection(myData);
var RowView = Marionette.ItemView.extend({
  template: "#row-template"
});

var TableView = Marionette.CompositeView.extend({
  childView: RowView,
  childViewContainer: "tbody",
  template: "#table-template"
});

var tableView = new TableView({collection: rowCollection });
tableView.render();
$("#result").html(tableView.el);
console.log(tableView.el);

JSFiddle：https://jsfiddle.net/sreekanth67/8v3n9tfz/

Answer 1

您可以为CompositeView定义tagName: table。请参阅Backbone文档here以供参考。

var RowView = Marionette.ItemView.extend({
  tagName: 'tr',
  template: "#row-template"
});

如何在没有div的情况下包装木偶视图？

1 个答案: