JSFiddle - React, Tailwind, and code Playground

by scispear

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
    <div>1.{{App.myObj.value}}</div>
    <div>2.{{App.myObj2.value}}</div>
    <div>3.{{App.myObj3.value}}</div>
</script>

CSS

header h1 {
    width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
    width: 100%; text-align: center; 
}
header nav a {
    color: #008Bff; cursor: pointer;
}
p {
    padding: 20px;
}

JavaScript

App = Em.Application.create({});

App.MyObject = Em.Object.extend({ value: 'initial' });

App.set('myObj', App.MyObject.create());
App.set('myObj2', App.MyObject.create());
App.set('myObj3', App.MyObject.create());


Em.run.later(function(){
    // We got this far.
    App.set('myObj.value', 'hello world');
    
    // Ember will throw an error because 'set' was not used and it is bound to the 'value' property
    try{
        App.get('myObj2').value = 'directValue';
    } catch(e){
        App.set('myObj3.value', e.message)
    }
},2000);