JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<script src="https://raw.github.com/mikeric/rivets/master/lib/rivets.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div id="libs">
    <input data-value="data.libs | libs" />
</div>

CSS

body {
    margin: 10px;
}

JavaScript

rivets.configure({
  adapter: {
    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);
    }
  }
});

var Model = Backbone.Model.extend({
    defaults : {
        libs : ['lib1', 'lib2']
    },
    initialize : function () {
        this.on('change:libs', this.fixLibs);
    },
    fixLibs : function (model, libs) {
        if (_.isString(libs)) {
            this.set('libs', _.compact(_.map(libs.split(','), function (lib) {
                return $.trim(lib);
            })));
        }
    }
});

rivets.formatters.libs = function(libs) {
    return typeof libs === 'string' ? libs : libs.join(', ');
}

var data = new Model();

data.on('change', function (model) {
    console.log(model.get('libs'));
});

rivets.bind(document.getElementById('libs'), {data:data});