JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>
<script id='template' type='text/ractive'>
    <comp data="{{c.resources}}" />
</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 classB = function () {}
var classA = function () {
    this._resources = new classB();
    
    // put prototype properties on this instance
    [ 'resources' ].forEach( function ( prop ) {
        var descriptor = Object.getOwnPropertyDescriptor( this.constructor.prototype, prop );
        Object.defineProperty( this, prop, descriptor );
    }.bind(this) );
}
Object.defineProperty(classA.prototype, "resources", {
    get: function () {
        return this._resources;
    },
    enumerable: true,
    configurable: true
});

Ractive.components.comp = Ractive.extend({
    init: function () {
        this.observe('data', function (newValue) {
            console.log(newValue); // Should be instance of classB and not an object
        });
    }
});

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        c: new classA()
    }
});