JSFiddle - React, Tailwind, and code Playground

by reubenposthuma

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.2.js"></script>

<h1>Welcome to Soularium!!</h1>
<script data-template-name='app' type='text/x-handlebars'>
  {{outlet}}
</script>
<script data-template-name='grid' type='text/x-handlebars'>
  Test
</script>
<script data-template-name='index' type='text/x-handlebars'>
  TEST
  {{outlet out_grid}}
  {{outlet out_selected}}
</script>

JavaScript

App = Ember.Application.create({
   LOG_TRANSITIONS: true
});

App.ApplicationView = Ember.View.extend({
  templateName: 'app'
});

App.ApplicationController = Ember.Controller.extend({
});

App.Item = Ember.Object.extend({
  id: null,
  url: null,
  name: null
});

App.DisplayItems = Ember.ArrayProxy.create({content:Ember.A()});
App.AnswerItems = Ember.ArrayProxy.create({content:Ember.A()});

App.DisplayItems.content.push(App.Item.create({name: "Reuben"}));

App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('grid', {
       into:'index', //template name
       outlet: 'out_grid', //named outlet
       controller: 'mainLayout' //controller you want to use
   });
   this.render('selected', {
       into:'index',
       outlet: 'out_selected',
       controller: 'selectedLayout'
   });
  }
});

App.IndexView = Ember.View.extend({
  templateName: 'index'
})


App.MainLayoutController = Ember.Controller.extend();
App.SelectedLayoutController = Ember.Controller.extend();