Ember + HandleBars Menu Ok

by musashimm

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <p>Click on menu item:</p>
{{outlet menu}}
{{outlet main}}
</script>

<script type="text/x-handlebars" data-template-name="index">
<h1>Index Content</h1>
</script>

<script type="text/x-handlebars" data-template-name="dir">
<h1>Dir Content</h1>
</script>

<script type="text/x-handlebars" data-template-name="menu-list">
  <ul class='nav nav-list'>
    {{#each controller}}
    {{#if isActive}}
    <li class="active">
    {{else}}
    <li>
    {{/if}}
    <a {{action changeRoute this.url}}>{{this.name}}</a>
    </li>
    {{/each}}
  </ul>
</script>

CSS

li.active {
    color: green;
}

ul {
    padding: 10px;
}

h1 {
    color: red;
}

JavaScript

App = Ember.Application.create();

App.menuItems = [
            {url: "index",name: "Index"},
            {url: "dir",name: "Dir"}
          ];

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

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

App.IndexView = Ember.View.extend({
  templateName: 'index',
});
App.IndexController = Ember.ObjectController.extend();

App.DirView = Ember.View.extend({
  templateName: 'dir',
});
App.Index2Controller = Ember.ObjectController.extend();

App.MenuListController = Ember.ArrayController.extend({
  content: [],
  init: function() {
    this._super();
    var content = this.get('content');
    App.menuItems.forEach(function(m){
      content.pushObject(Ember.Object.create(m));
    });
  },
  activateItem: function(url) {
    var content = this.get('content');
    content.forEach(function(m){
      if(url==m.url){
        m.set('isActive',true);
      } else {
        m.set('isActive',false);
      }
    });
  },
  changeActiveItem: function() {
    this.activateItem(App.router.currentState.name);
  }.observes('App.router.currentState')
});

App.MenuListView = Ember.View.extend({
  templateName: 'menu-list',
});

App.ThinRoute = Ember.Route.extend({
  changeRoute: function(router,context) {
    router.transitionTo(context.context,context);
  },
  connectOutlets: function(router){
    var appContr = router.get('applicationController');
    var cname = router.get('currentState.name');
    appContr.connectOutlet('main',cname);
    appContr.connectOutlet('menu','menuList');
  }
});

App.Router = Ember.Router.extend({
  //enableLogging: true,
  root: Ember.Route.extend({
    index: App.ThinRoute.extend({
      route: '/',
    }),
    dir: App.ThinRoute.extend({
      route: '/dir',
    })
  })
});

App.initialize();