JSFiddle - React, Tailwind, and code Playground

by jeffutter

HTML

<script src="https://raw.github.com/gist/1329411/ee7c55b0b4643fadfccde2988c634345d48600fe/sproutcore.js"></script>
<script src="https://raw.github.com/gist/4a49079576fa10275e8f/9140300fd6b3304d84a2bba9f7d420fa44ce363c/gistfile1.js"></script>
<script data-template-name='parent' type='text/x-handlebars'>
  {{#view id="parent"}}
    <h2>Parent</h2>
    
    <div id="child1"></div>
  
    <div id="child2"></div>
  {{/view}}
</script>
<script data-template-name='child1' type='text/x-handlebars'>
  Child1
</script>
<script data-template-name='child2' type='text/x-handlebars'>
  Child2
</script>
<div id="container"></div>

JavaScript

MyApp = SC.Application.create({
    NAMESPACE: 'MyApp'
});

MyApp.displayController = SC.ArrayController.create({
    parentView: SC.View.create({
        templateName: 'parent'
    }),
    child1View: SC.View.create({
        templateName: 'child1'
    }),
    child2View: SC.View.create({
        templateName: 'child2'
    })
});

MyApp.statechart = SC.Statechart.create({
    rootState: SC.State.extend({
        substatesAreConcurrent: YES,
        enterState: function() {
            console.log('enterParent');
            MyApp.displayController.get('parentView').appendTo($("#container"));
        },
        exitState: function() {
            MyApp.displayController.get('parentView').remove()
        },
        child1: SC.State.extend({
            enterState: function() {
                console.log('enterchild1');
                MyApp.displayController.get('child1View').appendTo($("#child1"));
            },
            exitState: function() {
                MyApp.displayController.get('child1View').remove()
            },
        }),
        child2: SC.State.extend({
            enterState: function() {
                console.log('enterChild2');
                MyApp.displayController.get('child2View').appendTo($("#child2"));
            },
            exitState: function() {
                MyApp.displayController.get('child2View').remove()
            },
        }),
    })
});

MyApp.statechart.initStatechart()