Question

我在复合视图或集合视图中渲染标题时遇到了一些问题。我试过了两个，但这简直不会渲染。

让我向您展示一些我的代码：

// composite view
define(function(require) {

    var BusinessTableTemplate = require("text!templates/BusinessTableTemplate.html");
    var BusinessRowView = require("views/BusinessRowView");
    var Marionette = require("marionette");

    return BusinessTableView = Marionette.CompositeView.extend({

        tagName: "table",
        className: "table table-hover",
        template: BusinessTableTemplate,
        itemView: BusinessRowView,
        appendHtml: function(collectionView, itemView){
            collectionView.$("tbody").append(itemView.el);
        }

    });

});

// BusinessTableTemplate
<script type="text/template">

    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Building</th>
            <th>Phone</th>
            <th>Website</th>
            <th>Categories</th>
        </tr>
    </thead>
    <tbody></tbody>

</script>

// itemview
define(function(require) {

    var BusinessRowTemplate = require("text!templates/BusinessRowTemplate.html");
    var Marionette = require("marionette");

    return BusinessRowView = Marionette.ItemView.extend({

        template: BusinessRowTemplate,
        tagName: "tr"

    });

});

// BusinessRowTemplate
<script type="text/template">

    <td>
        <%= name %>
    </td>
    <td>
        <% if (address) { %>
            <%= address %>
        <% } else { %>
            NA
        <% } %>
    </td>
    <td>
        <% if (building) { %>
            <%= building %>
        <% } else { %>
            NA
        <% } %>
    </td>
    <td>
    <td>
        <% _.each(phones, function(phone) { %>
            <span class="label label-default label-info"><%= phone %></span>
        <% }); %>
    </td>
    <td>
        <% if (website) { %>
            <%= website %>
        <% } else { %>
            NA
        <% } %>
    </td>
    <td>
        <% _.each(tags, function(category) { %>
            <span class="label label-default label-info"><%= category %></span>
        <% }); %>
    </td>
    <td>
        Ações
    </td>
</script>


// signal or event where I render the view
vent.on("search:seeAll", function(){
  if (self.results) {
    var businessDirectoryView = new BusinessDirectoryView();
    self.layout.modals.show(businessDirectoryView);
    var resultCollection = new Businesses(self.results, {renderInMap: false});
    var businessTableView = new BusinessTableView({
      collection: resultCollection
    });
    $("#businesses-container").html(businessTableView.render().$el);
  }
});

我在某个地方遵循了教程，但他们没有为表格指定标题。

在这里提供一点帮助吗？

谢谢！

Answer 1

您正在使用的Marionette JS版本是什么？

这是使用版本2.4.1（最新版本）的小提琴，它正在运行：

https://jsfiddle.net/aokrhw1w/2/

复合视图与以前的版本有一些变化，＆＃39; itemView＆＃39;已改为＆＃39; childView＆＃39;。

   DecVal   BinVal
    11   -> 1011
XOR 5    -> 0101
           -------
    14   -> 1110

希望这能解决你的问题。

Answer 2

CollectionView在集合中为每个模型呈现一个子视图。它没有任何方法可以像标题一样添加额外的HTML。

CompositeView也会呈现集合项，但您也可以添加额外的HTML。您的示例使用CompositeView，因此您做出了正确的选择。

因为您可以在渲染的集合周围使用自定义HTML，所以您需要告诉Marionette在哪里渲染集合项视图。 childViewContainer属性执行此操作：

Marionette.CompositeView.extend({
    tagName: "table",
    className: "table table-hover",
    template: BusinessTableTemplate,
    itemView: BusinessRowView,
    childViewContainer: 'tbody'
});

对于像这样的简单情况，您不需要使用attachHtml - 它适用于需要更改Marionette默认行为的边缘情况。

有关详细信息，请参阅CompositeView docs。

Answer 3

Marionette 3弃用了CompositeView类。相反，一个区域现在可以使用所呈现的内容覆盖其el 内部视图与new replaceElement option。

请参阅this example以呈现表格：

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

var TableBody = Marionette.CollectionView.extend({
  tagName: 'tbody',
  childView: RowView
});

var TableView = Marionette.View.extend({
  tagName: 'table',
  className: 'table table-hover',
  template: '#table',

  regions: {
    body: {
      el: 'tbody',
      replaceElement: true
    }
  },

  onRender: function() {
    this.showChildView('body', new TableBody({
      collection: this.collection
    }));
  }
});

var list = new Backbone.Collection([
  {id: 1, text: 'My text'},
  {id: 2, text: 'Another Item'}
]);

var myTable = new TableView({
  collection: list
});

myTable.render();

过度热心的主持人请注意：我给出了相同的答案here。这两个问题都是不重复，但执行是指同一个已弃用的类。花时间“tailor the answer to both questions”是没有意义的;这只是浪费时间，因为唯一重要的部分是：“这个类已被弃用，而是使用那个。这是一个示例并链接到文档”。

CompositeView和/或CollectionView不会呈现表头

3 个答案: