JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/ripplejs/each/master/test/functional/build/build.js"></script>
<script id="template" type="text/template">
    <div>
      <ul each="{{items}}">
        <li>{{name}} <button on-click="{{ this.removeItem.bind(this, $index) }}">Remove</button></li>
      </ul>
      <input type="text" ref="name" on-enter="{{ this.add }}" />
      <button on-click="{{ this.add }}">Add</button>
      <button on-click="{{ items.reverse.bind(items) }}">Reverse</button>
      <button on-click="{{ this.sort }}">Sort</button>
    </div>
</script>

CSS

li { list-style: none }

JavaScript

var ripple = require('ripple');
var each = require('each');
var events = require('events');
var refs = require('refs');

var List = ripple('#template')
  .use(each)
  .use(events)
  .use(refs);

List.directive('on-enter', {
  update: function(fn, el, view){
    var self = this;
    el.addEventListener('keypress', function(e){
      if(e.which === 13) fn.call(view, e);
    }, true);
  }
});

List.prototype.removeItem = function(index){
  this.data.items.splice(index, 1);
};

List.prototype.add = function(){
  this.data.items.push({
    name: this.refs.name.value
  });
  this.refs.name.value = "";
};

List.prototype.sort = function(){
  this.data.items.sort(function(a, b){
    return a.data.name > b.data.name;
  });
};

var list = new List({
  data: {
    items: [{ "name": "Homer" }]
  }
});

list.appendTo('body');