Question

我正在尝试使用linkTo解释here

这是我的模板：

{{#each model}}
    {{#linkTo "nodes.show" this tagName="tr"}}
        <td>{{shortenHash id}}</td>
        ...
        <td>
            <a {{action startEditing this bubbles=false}}><i class="icon-pencil"></i><a/>&nbsp;&nbsp;
            <a {{action destroyRecord this bubbles=false}}><i class="icon-remove"></i><a/>
        </td>
    {{/linkTo}}
{{/each}}

但这有几个问题：

该行无法点击
<a>操作是可点击的，但光标未显示

我正在使用最新的库：

DEBUG: ------------------------------- ember.js:356
DEBUG: Ember.VERSION : 1.0.0-rc.5 ember.js:356
DEBUG: Handlebars.VERSION : 1.0.0-rc.4 ember.js:356
DEBUG: jQuery.VERSION : 1.9.1 ember.js:356
DEBUG: ------------------------------- ember.js:356
DEBUG: location=http://localhost:9001/#/nodes apiUrl=//localhost:8000 ember.js:356
DEBUG: SettingsApp.VERSION : 0.0.0 ember.js:356
DEBUG: EMBER_DATA_VERSION : Last commit: ed99201 (2013-06-18 04:39:18 -0700) ember.js:356
DEBUG: ------------------------------- ember.js:356

Answer 1

默认情况下，

linkTo会生成一个锚“A”标记。此标记不允许直接附加到TABLE，TBODY或TR元素。请参阅规范

中的“允许的内容”部分

您可能要做的是将一个点击事件处理程序附加到TR，该处理程序连接到一个触发转换为“nodes.show”的操作。

{{#each model}}
  <tr {{action "goToLink" model.id}}>
    <td>{{shortenHash id}}</td>
  </tr>
{{/each}}

和控制器，

var NodesController = Ember.ArrayController.extend({
  actions : {
    goToLink : function(id) {
        this.transitionToRoute('nodes.show', id);
    }
  }
});

Answer 2

想要发表评论

这可能是非常自以为是，但与我无关。如果你必须渲染大的列表，你最终做分页，你应该采用不同的方法，然后使用旧的{{1}标记。这里是ember-list-view的用武之地。它是一个ember插件，允许你有很长的列表，但性能非常好。这是通过重用DOM元素而不是一次创建所有元素来实现的。我提出这个问题的原因是因为我看到有更多人使用table {{linkTo}}来解决此类问题。

有关tagName="tr"的更多信息，请考虑：

Answer 3

对于那些谷歌搜索，Ember列表视图不适用于当前稳定的Ember＆gt; 1.8 https://github.com/emberjs/list-view/issues/169

也许看看ember-cloak是否类似...... https://github.com/eviltrout/ember-cloaking

linkTo不会使完整行可单击

3 个答案: