Question

我有一个用透明三角形装饰的跨度。当用户点击三角形时，范围会扩展并显示其内容。对于ADA目的，我希望当用户按下回车键时，该范围也会扩展。这可能发生吗？我发现有一些链接表明它不受支持，但我找到了一个链接，说明它可能在更新版本的Ember中： "Multiple actions on element"

但是我无法在1.13.5中使用它。这就是我所拥有的：

{{#if isCollapsed}}
        <span class="control expanded" {{action "expand"}} {{action "expand" on="enter"></span>
    {{else}}
        <span class="control collapsed" {{action "collapse"}}></span>
    {{/if}}

单击工作的默认操作，但按Enter键时不会触发。有什么想法吗？

Answer 1

你需要做的是：

{{#if isCollapsed}}
    <span class="control expanded" {{action "expand"}} {{action "expand" on="key-press"></span>
{{else}}
    <span class="control collapsed" {{action "collapse"}}></span>
{{/if}}

你可以看到Ember.js监听here的事件的完整列表，但是需要将它们从camelCase更改为连字符，就像我上面所做的那样。正如Kristjan所说，你需要检查它是你事件中被按下的回车键。

话虽如此，你想要做的事情，可能不会奏效。 keyPress事件仅在具有焦点的元素上发出。您的span元素很可能没有焦点。你可以尝试给它专注，但是当用户点击其他任何地方时它就会松开。

您可以尝试在该路线的视图中设置一个特殊处理程序。

另外，我建议转到：

{{#if isCollapsed}}
    <span class="control expanded" {{action "toggleCollapsed"}} {{action "toggleCollapsed" on="enter"></span>
{{else}}
    <span class="control collapsed" {{action "toggleCollapsed"}}></span>
{{/if}}

然后在你的行动中你可以做到：

toggleCollapsed: function() {
    this.toggleProperty('isCollapsed');
}

只有一个事件更简单。：）

Answer 2

您可以使用在组件处于活动状态时触发的keyDown事件

   keyDown: function(e) {
        if(e.keyCode === 13) { // enter
            this.set('isCollapsed', !this.get('isCollapsed'));
        } 
    },

使用EmberJS将多个动作绑定到span

2 个答案: