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>

注意我已经添加到表行元素的类。当它的子链接是活动链接时，如何将“活动”类添加到此行？当前路径与集合中的元素匹配时，Ember会自动添加活动链接。我试图找到优雅的“Ember方式”来做到这一点，而不是诉诸jQuery hacks。

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类名。

优雅的方式来选择孩子<a> is active</a>

2 个答案: