Question

我有需要显示哪个tbody将是动态的表。

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

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

对于Eg：在JSON下方，您会看到时间11和12以及状态为“使用中”（绿色），“Idel”（红色），基于此我的列（第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，但是如何在模板内部构建表时添加它们？还有其他办法吗？

Answer 1

最后在帮助程序本身中创建了表结构并返回了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}}}

Answer 2

解释：

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

答案简短：

{{> Template.dynamic template=myTemplate}}

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

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

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

2 个答案: