javascript - rivets.js 和 [contenteditable]

Question

我正在使用主干和 rivets.js，但想使用表单标签以外的标签进行输入

例子

<h2 contenteditable="true" data-text="post.title"></h2>

那可能吗？

Answer 1

由于您通常在（h1、h2、p 等）上使用 contenteditable 的元素change在其文本内容更改时不会触发事件，因此您需要在这些元素上监听不同的事件，例如blur，keyup或 HTML5input事件（此如果您的目标是现代浏览器，这是您的最佳选择）。

为此，您需要编写自己的自定义活页夹。在这个活页夹中，您可以重用与文本绑定相同的例程，但您的绑定/取消绑定回调显然会有所不同。

rivets.binders.content = {
  routine: rivets.binders.text,
  bind: function(el) {
    var self = this
    this.callback = function() {
      rivets.config.adapter.publish(self.model, self.keypath, el.textContent)
    }
    el.addEventListener('input', this.callback, false)
  },
  unbind: function(el) {
    el.removeEventListener('input', this.callback, false)
  }
}

这是一个显示正在使用的自定义活页夹的小提琴（仅在 Chrome 22 和 Safari 6 中测试）。