Javascript 如何动态构造复合视图模板

期望输出：

  <script id="table-template" type="text/html">
      <table>
        <thead>
           ADD THE HEADER NAMES HERE DYNAMICALLY,
        </thead>        
        <!-- insert collection items -->
        <tbody></tbody>
      </table>
    </script>

在此处动态添加标题名称，

我正在尝试生成上面的模板，这里的问题是标题名

文件夹 数量 交换 FCY金额 量 账户

像上面一样，它是固定的，用户可以给出任意数量的头名称

这是我所做的代码：

Grid.Hexgrid = Backbone.Marionette.CompositeView.extend({
         template: "#header", 
         initialize : function (options){
           this.header = options.header;
        },
        onRender : function(){
            ADD THE HEADER INFORMATION HERE WHICH WILL COME UNDER <THEAD></THEAD>
        },

      appendHtml: function(collectionView, itemView, index){
        collectionView.$("tbody").append(itemView.el);
      }
    });

Grid.Hexgrid=Backbone.marionete.CompositeView.extend({
模板：“#标题”，
初始化：函数（选项）{
this.header=options.header；
},
onRender:function（）{
在此处添加标题信息，将在下面显示
},
appendHtml:函数（collectionView、itemView、index）{
collectionView.$（“tbody”）.append（itemView.el）；
}
});

---

我已经用

粗体

字母给出了我的评论。请有人帮我完成这项工作。

您不需要在视图中设置模板属性，因为函数getTemplate可以为您完成这项工作

无论如何，要以友好方式生成标头，我建议您使用另一种方法，将标头的数据传递给模板，如下所示：

serializeData: function() {
    var data = Backbone.Marionette.ItemView.prototype.serializeData.apply(this, arguments);
    data.header = this.header;
    return data;
}

然后在模板中，您可以执行以下操作：

<% _.each(header,function(h){ %>
    <div class="span2"><%= h %></div>
<% }); %>

---

通过以下方式完成：

onRender : function() {
            headerInformation = this.header;
            for ( var column in headerInformation) {
                this.$("tr").append("<th>" + headerInformation[column] + "</th>");
            }
        }

onRender:function（）{ headerInformation=this.header； for（标题信息中的var列）{ 本.$（“tr”）.append（“+标题信息[列]+”）； } }

---

向您问好

您真是太好了。它工作得很好，我们有没有办法不用在模板中指定就可以做到这一点？比如，我们可以在脚本本身中迭代头名称吗？我想您可以在视图的函数中以字符串形式生成头的html，然后将其分配给serializeData方法中的值，如：data.header=this.formatHeader（）；因此，在模板中，您可以简单地打印原始html:。无论如何，我更喜欢在模板中迭代它，对于这样一个小的逻辑，它是可以的。