使用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/