Meteor：如何在构建表格模板时动态地将类添加到 TD？答案

【问题标题】：Meteor: How do i dynamically addClass to the TD while constructing the Table Template?Meteor：如何在构建表格模板时动态地将类添加到 TD？
【发布时间】：2016-02-19 17:02:05
【问题描述】：

我有一个需求，需要在哪里显示 tbody 将是动态的表格。

下面的 JSON 来自 Template 的辅助函数作为返回。

此对象的长度将等于行数。 Cols 的数量是固定的，但列（即 TD）背景应根据您在下面看到的时间和状态更改为红色/绿色。

例如：在下面的 JSON 中，您会看到时间 11 和 12，状态为“使用中”（绿色）、“空闲”（红色），基于此，我的列（第 11 列和第 12 列）背景应该是绿色或红色。

[{
    "time": [11, 12],
    "status": ["In-Use", "Idle"],
    "name": "Book1"
   }, {
    "time": [12, 13, 14],
    "status": ["Idle", "In-Use"],
    "name": "Book2"
   }]

这可以在流星模板中做到吗？我无法弄清楚如何做到这一点。

下面是我到目前为止提出的模板：

<table class="table" >
        <thead>
          <tr>
            <th scope="col" class="Name"></th>
            <th scope="col">06:00</th>
            <th scope="col">07:00</th>
            <th scope="col">08:00</th>
            <th scope="col">09:00</th>
            <th scope="col">10:00</th>
            <th scope="col">11:00</th>
            <th scope="col">12:00</th>
            <th scope="col">13:00</th>
            <th scope="col">14:00</th>
            <th scope="col">15:00</th>
            <th scope="col">16:00</th>
            <th scope="col">17:00</th>
            <th scope="col">18:00</th>
            <th scope="col">19:00</th>
            <th scope="col">20:00</th>
            <th scope="col">21:00</th>
          </tr>
        </thead>


        <tbody>
          {{#each getHistory}}
          <tr>
            <td class="Name">{{name}}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

          </tr>
          {{/each}}
        </tbody>
      </table>

一个解决方案是编写一个带有背景图像属性的 CSS 红色和绿色，然后添加那些 TD 类，但是如何在模板内构建表格时添加它们？还有其他方法吗？

【问题讨论】：

到目前为止您尝试过什么？您没有表现出任何自己解决问题的尝试。
@ChristianFritz 我想我的问题并不清楚，无论如何我想对那些第 11 和第 12 TD 使用 addClass ，并且我会写背景：红色/绿色。所以实际的问题是如何根据时间和状态数组添加类？或者如果我们不能在 Template 中编写 addClass 的话，还有什么办法吗？

标签： meteor meteor-blaze

【解决方案1】：

解释：

https://themeteorchef.com/snippets/using-dynamic-templates/

简短的回答：

{{> Template.dynamic template=myTemplate}}

要动态设置一个类，这似乎是个问题，你可以这样做：

<div class="my_static_class {{my_dynamic_class}}"></div> 并将my_dynamic_class 声明为助手。

【讨论】：

我想我的问题并不清楚，无论如何我想在 Template 中的第 11 和第 12 TD 中使用 addClass ，并且我会写背景：红色/绿色的 Css。所以实际的问题是如何根据时间和状态数组添加类？或者如果我们不能在 Template 中编写 addClass 的话，还有什么办法吗？
你可以在<div class="whatever {{my_dynamic_class}} other_class"></div>中使用{{variable}}
是的，但是要指定我需要检查时间和状态数组值，时间：[11, 12] 和状态 ["In-Use","Idle"]，对于第 11 列设置状态作为 In-Use 并且第 12 列将 Status 设置为“Idle”，我该如何进行比较？我如何获取 11th ，In-Use 是状态？
所以你在你的辅助函数中这样做，你有本地范围数据来查找它。
你明白吗？我的辅助函数正在返回那个 JSON 对象。

【解决方案2】：

终于在helper本身中创建了表结构并返回了HTML

 var htmlTxt = [];
  for(i in historyData){
     htmlTxt.push('<tr id='+historyData[i].name+'>');
     htmlTxt.push('<td class="name">'+historyData[i].name+'</td>');
     var time = historyData[i].time;
     var status = historyData[i].status;
     for(i=1; i<=16;i++){
         var index= $.inArray(i, time);
         if(index == -1){
          htmlTxt.push('<td class="orange"></td>');
         }else{
          htmlTxt.push('<td class='+status[index]+'></td>');
         }
     }
     htmlTxt.push('</tr>');
  }

在模板中

{{{getHistory}}}

【讨论】：