键盘快捷键和 Durandal 对话框

Question

使用杜兰达尔，

app.showMessage(message, title);

显示一个带有提供的消息和标题的模式对话框，以及一个主按钮 OK。这一切都是由 Bootstrap 设计的。

它似乎不尊重键盘。用鼠标单击 OK 按钮按预期工作，但 ESC 和 ENTER 键都不能单击 OK 按钮。

我还没有在相当斯巴达的 Durandal 文档中找到任何有用的东西，但有时这意味着它包含在诸如 Knockout 或 Bootstrap 等子系统的文档中。

任何人都可以就将按钮绑定到键盘快捷键的习惯独立于浏览器的方式提出策略或相关阅读吗？

我很难相信 Durandal 对话框会忽略键盘，我想知道我是否搞砸了。

有那么一会儿，我以为我在 CSS 指定的行为中找到了答案。它甚至在 W3C 文档中指定。但它已过时且不受支持。

毫无疑问，我可以以模态方式呈现视图和视图模型。这将给我一个绑定额外行为的机会，并且我可以传递参数，几乎可以用插件代替app.showMessage()，但这一切似乎都相当繁重。

---

我今天注意到空格键会关闭消息对话框。大概只有一个可聚焦的控件，这就是焦点所在。鉴于 Durandal 极简主义的习惯，这甚至可能是设计使然，很难说。

Answer 1

您可以使用 jwerty，可以找到 here。我们在 Durandal 项目中使用了 jwerty（RavenDB 的新 HTML5 Raven Studio 中的 Ayende Rahien 也是如此，它也是用 Durandal 编写的）。

要查看使用 jwerty 的丰富键盘支持，请在我的 DropBox 帐户上take a look at this video 使用我完全使用 Durandal（和 jwerty）编写的 Dropdown Datepicker。

如果您有兴趣，我可以向您展示如何将 jwerty 集成到 Durandal（非常简单）。

[编辑]

将 jwerty 与 Durandal 结合使用有两种策略：内联和自定义 Knockout 绑定。

内联

下面是直接来自我们 CalendarNavigationEngine 的 sn-p：

//Bind the directional keys
    CalendarNavigationEngine.prototype.bindDirectionalKeys = function () {
        var that = this;

        var kContainerClass = this.kContainerClass;

        //Bind directional keys
        jwerty.key('left', function () { that.prevItem(); }, kContainerClass);
        jwerty.key('up', function () { that.prevWeek(); }, kContainerClass);
        jwerty.key('pgup / ctrl+left', function () { that.prevPage(); }, kContainerClass);
        jwerty.key('right', function () { that.nextItem(); }, kContainerClass);
        jwerty.key('down', function () { that.nextWeek(); }, kContainerClass);
        jwerty.key('pgdown / ctrl+right', function () { that.nextPage(); }, kContainerClass);
        jwerty.key('home', function () { that.firstItem(); }, kContainerClass);
        jwerty.key('end', function () { that.lastItem(); }, kContainerClass);
        jwerty.key('enter / tab', that.select.bind(that), kContainerClass);
    };

我们通常在 viewModel 上调用 bindDirectionalKeys Durandal 的 compositionComplete 处理程序。在这种情况下，调用链要深得多，因为 CalendarNavigationEngine 不是 viewModel。

inline 我的意思是说您直接从您的 viewModel（或模块）进行调用，如上所示。 kContainerClass 是一个或多个元素上的 DOM 类，它具有焦点并且应该接收和处理键盘事件。

使用这种方式，需要对应的unbind方法：

//Unbind key bindings
    CalendarNavigationEngine.prototype.clearKeyBindings = function () {
        $(this.kContainerClass).unbind('keydown.jwerty');
    };

这将[最终]从 Durandal 的 detached 处理程序中调用，并清除 kContainerClass 上下文中的所有键绑定以避免内存泄漏。这不是可选的。

自定义敲除绑定

StackOverflow 上有很多关于如何编写自定义 Knockout 绑定的资源。但基本上，该策略涉及将 DOM 元素绑定到 jwerty 键绑定。尽管我们没有采用这种方法（我们正在考虑），但这是非常微不足道的。

有一个警告：Knockout 不允许多个相同的绑定。所以你不能多次调用 jwerty 绑定，这是你需要做的，以便将多个键绑定与单个元素相关联（如我上面给出的示例）。但是，您可以做的是将键绑定的 array 绑定到单个元素，然后在其 init 处理程序中使用您的自定义 Knockout 绑定，迭代该数组，使用 jwerty 绑定每一个项目。同样，仍然微不足道。