javascript - 我将如何绑定应用程序的按键？

Question

如果它们是简单的变量更改，秘银会谈论很多关于绑定和事件的内容，但是绑定说+功能的关键呢？我尝试m.withAttr('keyCode')绑定到我想要处理它的控制器方法，但没有。

示例代码

Answer 1

对于不是 DOM 元素属性的属性，Mithril 没有帮助器。withAttr只处理 DOM 元素属性（顾名思义）。对于 keyCode，你需要定义一个自定义的 helper

function withKey(key, callback) {
  return function(e) {
    var ch = String.fromCharCode(e.keyCode)
    if (ch == key) callback(key)
    else m.redraw.strategy("none") //don't redraw (v0.1.20+ only)
  }
}

m("div", {onkeypress: withKey("+", ctrl.doSomething)})

如果按下的键不是您要查找的键，则 else 语句只是为了防止重绘。

Answer 2

秘银渲染 fcnm(tag, attrs, children)允许您config在attrs. 它允许您在创建 DOM 元素后调用它的方法。请参阅名为访问真实 DOM 元素的部分。

你可以很容易地滥用 Mithril，但它是附加非标准事件处理程序的正确用途。像下面这样的东西应该可以工作：

m('li', {config: setupKeyHandler}, 'foo');

function setupKeyHandler (el, isInitialized, context) {
  el.addEventListener('keyup', function (event) {})
}

Answer 3

Mithril 不处理整个页面，它是给你的事件。您可以addEventListener在window.onkeydown该回调中执行您需要的操作，例如更新控制器或重绘页面。

http://jsbin.com/hikinoza/1/edit

---

m.proporm.withAttr本身在任何地方都没有约束力。真正的绑定发生在您onXXX为对象指定某些属性时，例如

m('div', {onClick: myFunc})

这会将真实onClick事件附加到div将要创建的真实 dom 节点。