Question

我需要创建一个包裹整个表行的{{linkTo}}，但如果{... #linkTo中存在任何非ember 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}}

Answer 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);
    }
}

Answer 2

为什么不使用tagName ='tr'的视图，并在click事件中重定向到你想要的路径？像这样的东西：

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}}

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

Answer 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"属性，以便屏幕阅读器可以访问它。

Emberjs，{{＃link-to}}句柄在缠绕DOM元素时会中断

3 个答案: