使用Durandal,

app.showMessage(message, title);


显示带有提供的消息和标题的模态对话框,以及单个主按钮“确定”。所有这些都由Bootstrap设置样式。

它似乎不尊重键盘。用鼠标单击“确定”按钮将按预期工作,但是ESC和ENTER键均未单击“确定”按钮。

我还没有在Spartan Durandal文档中找到任何有用的东西,但是有时候这意味着它被诸如Knockout或Bootstrap之类的子系统的文档所涵盖。

任何人都可以在将浏览器绑定到键盘快捷键的习惯上,以一种独立于浏览器的方式提出策略或相关阅读吗?

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

有一阵子,我以为我有CSS指定行为的答案。它甚至在W3C文档中指定。但是它已经过时并且不受支持。

毫无疑问,我可以模态地呈现视图和视图模型。这将使我有机会绑定其他行为,并且我可以传递参数,几乎可以用插件代替app.showMessage(),但这似乎是一件繁重的工作。



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

最佳答案

您可以使用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的代码段:

//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。

通过内联,我的意思是说您是直接从viewModel(或模块)进行调用,如上所示。 kContainerClass是一个或多个元素上的DOM类,具有焦点并且应接收和处理键盘事件。

使用这种方法,您需要一个相应的取消绑定方法:

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


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

自定义敲除绑定

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

有一个警告:淘汰赛不允许多个相同的绑定。因此,您不能多次调用jwerty绑定,这是将多个键绑定与单个元素相关联所需的操作(如我上面给出的示例)。但是,您可以做的是将键绑定数组绑定到单个元素,然后在其init处理程序中使用自定义的Knockout绑定,对该数组进行迭代,并为每个项目使用jwerty绑定。同样,仍然微不足道。

关于javascript - 键盘快捷键和Durandal对话框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24117767/

10-11 05:30