JSFiddle - React, Tailwind, and code Playground

by drulia

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script src="http://elipster.net/misc/ember-data.js"></script>
<div id="content"></div>

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
    
<script type="text/x-handlebars" data-template-name="nav">
    {{name}} - {{some}}
  <ul class="nav">
    {{#each nav in navItems}}
      {{ partial "basicNav"}}
    {{/each}}
   </ul>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="_basicNav">
    <li>{{#linkTo 'anon.navitem' nav}}s - {{nav.navItemName}}{{/linkTo}}</li>
</script>

<script type="text/x-handlebars" data-template-name="navitem">Into navitem template
    <hr>
    <p>{{nav}}</p>
    <p>{{navItemName}}</p>
    {{#linkTo anon}}Back{{/linkTo}}
</script>

CSS

#content {
    margin: 20px;
}

JavaScript

window.App = Ember.Application.create({
	rootElement: '#content'
});

App.Router.map(function() {
 this.resource('anon', {path: '/main'},
     function() {
         this.route('navitem', {path:':navitem_id'});
     });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('anon');
  }
});

App.AnonRoute = Ember.Route.extend({
    model: function() {
        return App.Nav.find('10');
    },
    renderTemplate: function() {
        this.render('nav');
    },
    setupController: function(controller, model) {
        controller.set('content', model);
    }
});

App.NavitemRoute = Ember.Route.extend({
    model: function(params) {
        return App.Navitem.find(params.navitem_id);
    }
});

App.AnonController = Ember.ObjectController.extend({
  //selectedNav:'',
  //setNav:function(value){
  //var nav = App.Nav.find(value);
  //var items = nav.get('navItems');
  //this.set('content', items);    
  //}
    some: function() {
        var self = this;
        //console.log('some1')
        setTimeout((function(){
            //console.log(self.get('navItems').objectAt(0).get('id'))
        }),1000)
        
        return 'somde';
    }.property()
});


App.Nav = DS.Model.extend({
  navItems: DS.hasMany('App.Navitem'),
  name: DS.attr('string')
});

App.Navitem = DS.Model.extend({
  nav:DS.belongsTo('App.Nav'),
  navItemName:DS.attr('string'),
  navItemPath:DS.attr('string')
});

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: 'DS.FixtureAdapter'
});

App.Nav.FIXTURES = [
 {
  id: '10',
  name: 'Anon',
  navItems: [100,200,300]
 }
];

App.Navitem.FIXTURES = [
{
  id:100,
  nav:10,
  navItemName:'Home',
  navItemPath:'anon.home'
},
{
  id:200,
  nav:10,
  navItemName:'Contact',
  navItemPath:'anon.contact'
},
{
  id:300,
  nav:10,
  navItemName:'About',
  navItemPath:'anon.about'
}
];