javascript - rivets.js と [コンテンツ編集可能]

Question

backbone と rivets.js を使っているがフォームタグ以外のタグを入力に使いたい

例

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

それは可能ですか？

Answer 1

contenteditable を通常使用する要素 (h1、h2、p など)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 でのみテストされています)。