JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/0.4.0/ractive.js"></script>
<script src="https://rawgit.com/ractivejs/ractive-adaptors-backbone/master/ractive-adaptors-backbone.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    {{#model}}
    <comp-1 model="{{this}}"/>
    {{/model}}
</script>
<script id='tpl-comp' type='text/ractive'>
    {{#model}}
    Title: {{title}}
    {{/model}}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var fComponent = Ractive.extend({
    "adapt": ["Backbone"],
    "template": "#tpl-comp"
});
Ractive.components = {
    "comp-1": fComponent
};
var oInstance = new Ractive({
    "el": "main",
    "template": "#template",
    "data": {
        "model": new Backbone.Model({"title": "aaa", "something": ""})
    }
});
console.log(oInstance.get("model"));
oInstance.get("model").set("something", "anything");
console.log(oInstance.get("model"));