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

【问题标题】：How to wrap Marionette view without div?如何在没有 div 的情况下包装木偶视图？
【发布时间】：2016-02-14 12:13:17
【问题描述】：

我正在尝试创建一个复合视图来构建一个表，其中每个表行都作为子视图。我想在每个子视图中有两个表行。 Marionette 复合视图将我的子视图包装在我不想要的空 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/

【问题讨论】：

标签： javascript html backbone.js marionette

【解决方案1】：

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

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

【讨论】：