rivets.js和[可编辑内容]

Question

我正在使用backbone和rivets.js，但希望使用除form标签之外的其他标签进行输入

示例

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

这有可能吗？

Answer 1

因为您通常在(h1、h2、p等)上使用的元素是contenteditable。不要在文本内容发生变化时触发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 (仅在Chrome22和Safari6中测试)。