mve - rivets + watch

gistfile1.js

rivets.configure({
  adapter: {
    subscribe: function(obj, keypath, callback) {
      watch(obj, keypath, callback)
    },
    read: function(obj, keypath) {
      return obj[keypath]
    },
    publish: function(obj, keypath, value) {
      obj[keypath] = value
    }
  }
})

// LIVE INPUT CUSTOM BINDER

rivets.binders.input = {
  bind: function(el) {
    el.addEventListener('input', this.publish)
  },

}
          

// BINDING PLAIN JAVASCRIPT OBJECTS TO THE VIEW

var item = {
  title: "Rivets.js + Watch.js!",
  text: "change me",

}
          

var el = document.getElementById('view');

rivets.bind(el, {item: item})

gistfile2.html

<div id="view">
  <section>
    <h1 data-text="item.title"></h1>
    <p>Binding text using data-text <code data-text="item.text"></code>.</p>
    <p>Text Value: <input data-input="item.text"></p>
  </section>
  
</div>