JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="main-1"></div>

<script id='template' type='text/ractive'>
    <h1>{{ title }}</h1>
    {{#page}}
    <p>{{ current }} of {{ max }}</p>
    {{/page}}
</script>

JavaScript

var MyCustomRactive = Ractive.extend({
    complete: function() {
        alert(1);
    }
});

new MyCustomRactive({
    computed: {
        "page.current": function(){ return 1; },
        "page.max": function(){ return 10; }
    },
    data: {
        title: "Works"
    },
    el: '#main-1',
    template: '#template'
});