Question

我一直在尝试使用来自灯丝组的tablesaw插件（仅堆栈版本）渲染响应表。 View基本上使用骨干和下划线模板进行渲染。但是，在缩小视口时，标签不会显示。

https://github.com/filamentgroup/tablesaw

我的骨骼视图如下。从spec.json文件中读取模型。

App.views.AnalyticsView = Backbone.View.extend({
    render: function () {
        this.$el.html(this.template());
        var $tableBody = this.$el.find('#table-body');
        //Creating analytics table rows from spec.json
        //Appending to table body in analytics page template
        _.each(this.collection.models, function(model) {
            var rowHtml = '<tr>';
            _.each(model.attributes, function(value) {
                rowHtml += '<td>' + value + '</td>';
            });
            rowHtml += '</tr>';
            $tableBody.append(rowHtml);            
        });
        return this;
    }
});

我的下划线模板如下 -

<div class="row-fluid">
    <div class="span12">
        <p><%_ analytics.intro %></p>
    </div>
</div>
<div>

</div>
    <table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
      <thead id="table-head">
         <th><%_ analytics.parameter %></th>
         <th><%_ analytics.title %></th>
         <th><%_ analytics.apisource %></th>
         <th><%_ analytics.description %></th>
      </thead>
      <tbody id="table-body"></tbody>
    </table>
</div>

使用underi18n对表头进行国际化。我是骨干的新手，所以如果有更好的方法来渲染视图，请随时告诉我。我的目标是获得一个完全响应的表，其数据将从spec.json文件中设置。

提前致谢。

Answer 1

所以问题已经解决了。我必须在tablesaw插件中编辑几行，特别是触发事件的地方。

之前它是 - this.$table.trigger( events.create, [ this, colstart ] );，它没有触发所需的事件。我将其更改为$( document ).trigger( events.create, [ this, colstart ] );，这使其正常运行。

我直接使用this.$el.find("#analytics-table").table();调用了该插件。此外，我还删除了＆＃39;增强 - tablesaw＆＃39;与插件关联的事件。

感谢@ahmad的帮助

使用灯丝组tablesaw插件时不显示标签

1 个答案: