JSFiddle - React, Tailwind, and code Playground

by redengin

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  <ul>
  {{#each item in content}}
      <li {{action "showModal"}}>{{item}}</li>
  {{/each}}
   </ul>
    
   {{outlet modalOutlet}}
</script>

<script type="text/x-handlebars" data-template-name="modalTemplate">
    Im modal, without state change! <button {{action hideModal}}>Hide</button>
</script>

<script type="text/x-handlebars" data-template-name="dummy">
</script>

CSS

ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

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

App.ModalView = Ember.View.extend({
    templateName: 'modalTemplate'
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['a', 'b', 'c']);
  },
    events: {
        showModal: function(){
            this.render('modal', {into: 'index', outlet: 'modalOutlet'}); 
        },
        hideModal: function(){
            this.render( 'dummy', {into: 'index', outlet: 'modalOutlet'}); 
        }
    }
});