如何包裝沒有div的木偶視圖？

Question

我試圖創建一個復合視圖來構建一個表，其中每個表行都作為一個子視圖。 我想在每個childview中有兩個表行。 木偶復合視圖將我的子視圖包裝在我不需要的空div中。 我該如何實現？ 我知道可以為視圖使用“ id”屬性，並使用<tr>呈現表行，但是在這種情況下，childView中有兩個'tr'條目。

HTML模板：

<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 。 請參閱此處的骨干文檔以供參考。

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