Edit in JSFiddle

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();
    }
  }.property('content.length')
});

//ItemControllers

App.YearItemController = Ember.ObjectController.extend({
  isExpanded: false,
  totalYearPosts: function(){
    var totalPosts = 0;    
    this.get('content.value').forEach(function(post,idx){
      totalPosts += post.get('value.length');
    })
    return totalPosts;
  }.property()
});

App.MonthItemController = Ember.ObjectController.extend({
  isExpanded: false,
     star: function(post){
  alert("called");
   debugger; 
}
});


//Model

App.Post = Ember.Model.extend({
    description : Ember.attr(),
    date: Ember.attr(Date),
    name: Ember.attr(),
  starred: Ember.attr()
});

App.Post.adapter = Ember.FixtureAdapter.create();

App.Post.FIXTURES = [
  { id: '12',name:'Post12', description: 'This is post12 description', date: '2013-06-01',starred:false },
    { id: '11',name:'Post11', description: 'This is post11 description', date: '2013-07-01',starred:false },
    { id: '10',name:'Post10', description: 'This is post10 description', date: '2013-07-03',starred:false },
    { id: '9',name:'Post9', description: 'This is post9 description', date: '2013-04-23',starred:false },
    { id: '8',name:'Post8', description: 'This is post8 description', date: '2013-03-30',starred:false },
    { id: '7',name:'Post7', description: 'This is post7 description', date: '2013-02-03',starred:false },
    { id: '6',name:'Post6', description: 'This is post6 description', date: '2012-07-01',starred:false },
    { id: '5',name:'Post5', description: 'This is post5 description', date: '2012-07-01',starred:false },
    { id: '4',name:'Post4', description: 'This is post4 description', date: '2012-02-03',starred:false },
    { id: '3',name:'Post3', description: 'This is post3 description', date: '2012-02-23',starred:false },
    { id: '2',name:'Post2', description: 'This is post2 description', date: '2012-02-30',starred:false },
    { id: '1',name:'Post1', description: 'This is post1 description', date: '2012-01-03',starred:false }
];

<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>
  

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