CODEWITHSUNDEEP
javascriptbackbone.jsrivets.js
Wayne Ashley Berry
Wayne Ashley Berry

Reputation: 539

rivets.js and [contenteditable]

I'm using backbone and rivets.js but want to use tags other than form tags for input

example

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

Is that possible?

Upvotes: 1

Views: 924

Answers (1)

Michael Richards
Michael Richards

Reputation: 1811

Since the elements that you would normally use contenteditable on (h1, h2, p, etc.) dont fire change events when their text content changes, you will need to listen to a different event on these, such as blur, keyup or the HTML5 input event (this is your best option if you're targeting modern browsers).

To do this, you would need to write your own custom binder. Within this binder, you can reuse the same routine as the text binding, but your bind/unbind callbacks will obviously differ.

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 showing this custom binder in use (only tested in Chrome 22 and Safari 6).

Upvotes: 2

Related Questions