Emberjs，{{#link-to}} Handlebars 在包裹 DOM 元素时会中断答案

【问题标题】：Emberjs, {{#link-to}} Handlebars break when wrapped around DOM elementsEmberjs，{{#link-to}} Handlebars 在包裹 DOM 元素时会中断
【发布时间】：2014-02-17 21:17:09
【问题描述】：

我需要创建一个环绕整个表格行的 {{linkTo}}，但如果 {{#linkTo 之间有任何非灰烬 DOM 元素，它不允许我使用 {{linkTo}} }} 和 {{/linkTo}}

当我将 linkTo 直接放在 {{Name}} 周围时，就像在下面的代码中一样，它可以工作

{{#each}}
  <tr class="people-list">
    <td>
      <input type="checkbox" class="toggle">           
      <label class="category-text">
        {{#linkTo 'category' this}}
          {{Name}}
        {{/linkTo}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
      {{/linkTo}
    </td>
  </tr>
{{/each}}

但是当我尝试将这些链接扩展到外部时，如下所示，linkTo 根本不起作用。

{{#each}}
{{#linkTo 'category' this}}
  <tr class="people-list">
    <td>
      <input type="checkbox" class="toggle">            
      <label class="category-text">       
          {{Name}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
    </td>
  </tr>
{{/linkTo}
{{/each}}

【问题讨论】：

将tr 元素包装在锚链接中将是无效的 HTML。

标签： html ember.js link-to handlebars.js nest

【解决方案1】：

您可以通过调用重定向到不同路由的操作来获得此结果，而不是使用 {{#linkTo}}：

{{#each}}
  <tr class="people-list" {{action 'goTo' this}}>
    <td>
      <input type="checkbox" class="toggle">            
      <label class="category-text">       
          {{Name}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
    </td>
  </tr>
{{/each}}

然后在你的控制器上：

actions: {
    goTo : function(input){
        this.transitionToRoute('category', input);
    }
}

【讨论】：

我其实更喜欢这种方式
有关这种方式的注意事项：如果您输入单个类别时“链接”仍在屏幕上，您将不会获得使用 link-to 时会获得的 active 类路线。
@Jason 没有active 类怎么会成为问题？我有一个动态模板，我在所有其他模型的模板中{{render 'globalList' model}}（例如category.hbs、user.hbs 等），但是当我在这种特殊情况下使用goTo 操作时，我得到了一个错误

【解决方案2】：

为什么不使用 tagName='tr' 的视图，并在点击事件中重定向到您想要的路线？像这样：

App.LinkToCategory = Ember.View.extend({
  classNames: ['people-list'],
  tagName: 'tr',
  click: function() {
    router.transitionTo('category', category)
  }
})

在你的模板中是这样的：

{{#view App.LinkToCategory category=this}}
  <td>
    <input type="checkbox" class="toggle">            
    <label class="category-text">       
      {{Name}}
    </label>
    <img class="table-img" src="images/x.png">
    <img class="table-img" {{action 'edit'}} src="images/pencil-grey.png">
  </td>
{{/view}}

我没有检查它是否有效，但你明白了。

【讨论】：

【解决方案3】：

link-to 助手接受 tagName 属性，因此您可以创建链接 tr 本身的元素。

{{#each}}
  {{#linkTo "category" this tagName="tr" class="people-list" role="link"}}
    <td>
      <input type="checkbox" class="toggle">            
      <label class="category-text">       
          {{Name}}
      </label>
      <img class="table-img" src="images/x.png">
      <img class="table-img" {{action "edit" bubbles=false}} src="images/pencil-grey.png">
    </td>
  {{/linkTo}
{{/each}}

您可能还需要将bubbles=false 添加到您的编辑按钮，这样点击它就不会跟随链接。由于“链接”不是a 元素，我还添加了role="link" 属性，以便屏幕阅读器可以访问它。

【讨论】：