rivets.js和[contenteditable]

Question

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

例如

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

这可能吗？

Answer 1

由于您通常使用的元素（h1，h2，p等）在文本内容发生变化时不会触发change事件，因此您需要在这些事件上听取不同的事件，例如作为blur，keyup或HTML5 input事件（如果您的目标是现代浏览器，这是您的最佳选择）。

为此，您需要编写自己的自定义绑定器。在此绑定器中，您可以重用与文本绑定相同的例程，但绑定/解除绑定回调明显不同。

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显示正在使用的自定义活页夹（仅在Chrome 22和Safari 6中测试过）。