javascript - rivets.js 和 [contenteditable]

Question

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

例子

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

这可能吗？

Answer 1

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

为此，您需要编写自己的自定义 Binder 。在此 Binder 中，您可以重用与文本绑定(bind)相同的例程，但您的绑定(bind)/取消绑定(bind)回调将明显不同。

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)
  }
}

Here is a fiddle显示正在使用的自定义 Binder (仅在 Chrome 22 和 Safari 6 中测试过)。