选择<tr>孩子何时<a>活动的优雅方式

Question

假设我有以下部分模板：

<script type="text/x-handlebars" data-template-name="_folderList">
  <table id="folder-list">
    <thead>
      <tr class="PLEASE_MAKE_ME_ACTIVE_IF_SELECTED_ROW">
        <th>Name</th>
        <th>Date Created</th>
      </tr>
    </thead>
    <tbody>
    {{#each folder in controller}}
        <tr>
          <td>
            {{#linkTo "folder" folder }} 
              <i class="icon-folder-close"></i> {{ folder.folder_name }} 
            {{/linkTo}}
          </td>
          <td style="padding-left: 15px;">
            {{ prettyDate folder.created_date}}
          </td>
        </tr>
    {{/each}}
    </tbody>
  </table>
</script>

请注意我添加到table行元素中的类。当"活动"类的子链接是活动链接时，如何将其添加到此行？当当前路由与集合中的元素匹配时，Ember会自动添加活动链接。我正在努力寻找一种优雅的"Ember方式"来做到这一点，而不需要借助jQuery技巧。

Answer 1

虽然我仍然希望看到这个问题的答案，正如我最初所说的那样，但我现在采用的解决方法是根本不使用表。我已经在我的网站的其余部分使用了基于Bootstrap的CSS布局，所以我决定使用流畅的布局而不是表格：

<script type="text/x-handlebars" data-template-name="_folderList">
  <div id="folder-list">
        <div class="container-fluid list-header">
          <div class="row-fluid">
            <div class="span5">Name</div>
            <div class="span7">Date Created</div>
          </div>
        </div>
      {{#each folder in controller}}
        {{#linkTo "folder" folder }} 
          <div class="container-fluid list-item">
            <div class="row-fluid">
              <div class="span5">
                <i class="icon-folder-close"></i> {{ folder.folder_name }} 
              </div>
              <div class="span7">
                {{ prettyDate folder.created_date}}
              </div>
            </div>
          </div>
        {{/linkTo}}
      {{/each}}
  </div>
</script>

这允许我使用｛｛#linkTo｝｝用锚来包装整个"行"，并相应地设置整行的样式。

Answer 2

您可以使用bindAttr来切换类名。例如，如果在控制器的isSelected属性中保持状态，则在模板中保持状态。

<tr {{bindAttr class='isSelected:active'}}>

其中active是css类名。