JSFiddle - React, Tailwind, and code Playground

by anthonyshort

HTML

<script src="https://rawgithub.com/ripplejs/ripple/master/dist/ripple.min.js"></script>
<script src="https://rawgithub.com/ripplejs/events/master/dist/ripple-events.min.js"></script>
<script src="https://rawgithub.com/ripplejs/refs/master/dist/ripple-refs.min.js"></script>
<script src="https://rawgithub.com/ripplejs/markdown/master/dist/ripple-markdown.min.js"></script>
<script src="https://rawgithub.com/ripplejs/each/master/dist/ripple-each.js"></script>
<script type="text/template" id="template">
    <div>
        <h3>TODO</h3>
        <todo-list items="{{items}}"></todo-list>
        <form on-submit="{{this.handleSubmit}}">
        <input ref="text" />
        <button>Add # {{ items.length + 1 }}</button>
        </form>
    </div>
</script>

JavaScript

var TodoList = ripple('<ul each="{{items}}"><li>{{$value}}</li></ul>');

var TodoApp = ripple('#template')
  .use(ripple.events)
  .use(ripple.refs)
  .use(ripple.each)
  .compose('todo-list', TodoList);

TodoApp.prototype.handleSubmit: function(e) {
    e.preventDefault();
    this.data.items.push(this.refs.text.value);
    this.refs.text.value = '';
},

var app = new TodoApp({
    data: { items: [] }
});

app.appendTo(document.body);