JSFiddle - React, Tailwind, and code Playground

by Selva Ganesh

HTML

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.erikbryn.com/ember-model/ember-model-latest.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<script type="text/x-handlebars" id="components/blog-archive">
 <h4 class="cursive"> Blog Archive </h4>
 {{#each archives itemController="yearItem"}}
  <div class="span7">
   <div class="span12">
   <a {{action toggleProperty 'isExpanded'}}>
   <i {{bindAttr class="isExpanded:icon-chevron-down:icon-chevron-right"}}></i>{{key}}</a><span class="muted"> ({{totalYearPosts}}) </span></div>
   
   
  {{#if isExpanded}}
  {{#each value itemController="monthItem"}}
  <div class="span12">
  <div class="span12" style="margin-left: 25px;"><a {{action toggleProperty 'isExpanded'}}> 
  <i {{bindAttr class="isExpanded:icon-chevron-down:icon-chevron-right"}}></i> {{key}}</a> <span class="muted"> ({{value.length}}) </span></div>
  
  
    {{#if isExpanded}}
    {{#each value}}
    <div class="span12" style="margin-left: 50px;">
      {{#linkTo 'post' this}}{{name}}{{/linkTo}}
    </div>
    {{/each}}
    {{/if}}
    
  </div>
  {{/each}}
  {{/if}}
  </div>
  {{/each}}

  </script>
  
  <script type="text/x-handlebars" id="posts">
 <div class="row-fluid" style="margin-bottom: 30px;">
  {{blog-archive content=content}}
<div class="span4">
{{outlet}}
  </div>
</div>
  </script>
  
  <script type="text/x-handlebars" id="post">
{{name}} 's    template
  </script>

CSS

a{
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}
 
a.active {
  color: #e64d33;
  font-size: 16px
}

JavaScript

App = Ember.Application.create();

App.Router.map(function () {
  this.resource('posts', function(){
     this.resource('post',{path: "post/:id"});
  });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function(){
    console.log('called');
    this.transitionTo('posts');
  }
});

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return App.Post.find();
  },

});

App.PostRoute = Ember.Route.extend({
  model: function(model){
    return App.Post.find(model.id);
  },
  serialize: function(model){
    return {id: model.id};
  },
  renderTemplate: function(){
    this.render('post',{into: 'posts'})
  }

});

App.PostsController = Ember.ArrayController.extend({

  starMyPost: function(post){

   alert(post.get('id')); 
  }

});



//Ember Component

App.BlogArchiveComponent = Ember.Component.extend({

 months: ['January','Feburary','March','April','May','June','July','August','September','October','November','December'],


 archives: function(){
    var content = this.get('content.content'),
        tempMonth, 
        tempYear, 
        yearArray = Em.A(), 
        monthArray,monthObj,yearObj,
        self = this;

    if(Em.isArray(content)){

    return content.map(function(itm,idx){
      var date = itm.get('date'),
        year = date.getFullYear(),
        month = date.getMonth();  
      
      if(year !== tempYear)
        monthArray = Em.A();

      if(month != tempMonth){
        tempMonth = month;
        monthObj = Em.Object.create();        
        monthObj.set('key',self.get('months')[month]);
        monthObj.set('value',Em.A());
        monthArray.pushObject(monthObj);
      }      
      
      monthObj.get('value').pushObject(itm);

      if(year != tempYear){
        tempYear = year;
        yearObj = Em.Object.create();        
        yearObj.set('key',year);
        yearObj.set('value',monthArray);
        return yearObj;
      }
    }).compact();
    }
 ...