JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://rawgithub.com/mikeric/rivets/v0.6.3/dist/rivets.min.js"></script>
<p>Change the text in the input and then click outside the input to trigger a change event (it will progate the new value back to the model, and then update the span that is currently bound to the "name" attribute)</p>

<div id="user-view">
  <span>{ user:name }</span>
  <input rv-value="user:name">
</div>

CSS

p {
  color: #aaa;
  margin-bottom: 10px;
}

span {
  margin: 0.5em 0;
  font-size: 1.5rem;
  display: block;
}

JavaScript

// CONFIGURE RIVETS.JS WITH BACKBONE.JS

rivets.adapters[':'] = {
  subscribe: function(obj, keypath, callback) {
    obj.on('change:' + keypath, callback);
  },
  unsubscribe: function(obj, keypath, callback) {
    obj.off('change:' + keypath, callback);
  },
  read: function(obj, keypath) {
    return obj.get(keypath);
  },
  publish: function(obj, keypath, value) {
    obj.set(keypath, value);
  }
}

// BINDING BACKBONE.JS MODEL(S) TO A VIEW

var user = new Backbone.Model({name: 'Joe'});
var el = document.getElementById('user-view');

rivets.bind(el, {user: user});