I know i can find examples of this but i cant put it into my code without errors... just dont know why.
I want start with set class="menu-active" to first in menu.
<li><a {{action gotoAbout}} >About</a></li>
And later when somebody click other position of menu move class="menu-active" to this position.
http://jsfiddle.net/kwladyka/LGArM/3/
And the bonus question: Do you have any remarks to make my code better?
HTML
<script type="text/x-handlebars" data-template-name="application">
{{view App.NavbarView}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="navbar">
<div id="menu" class="grid_12">
<ul>
<li><a {{bindAttr class="isAbout:active"}} {{action gotoAbout}} >About</a></li>
<li><a {{bindAttr class="isProjects:active"}} {{action gotoProjects}} >Projekty</a></li>
<li><a {{action gotoTechnology}} >Technologie</a></li>
<li><a {{action gotoContact}} >Kontakt</a></li>
</ul>
</div>
</script>
EMBERJS
$(function() {
console.log("### emberjs start ###");
App = Em.Application.create({
rootElement: '#emberjs-container'
});
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.NavbarController = Em.Controller.extend({
});
App.NavbarView = Em.View.extend({
templateName: 'navbar',
});
App.AboutView = Em.View.extend({
templateName: 'about'
});
App.ProjectsView = Em.View.extend({
templateName: 'projects'
});
App.TechnologyView = Em.View.extend({
templateName: 'technology'
});
App.ContactView = Em.View.extend({
templateName: 'contact'
});
App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',
root: Em.Route.extend({
// EVENTS
gotoAbout: Ember.Route.transitionTo('about'),
gotoProjects: Ember.Route.transitionTo('projects'),
gotoTechnology: Ember.Route.transitionTo('technology'),
gotoContact: Ember.Route.transitionTo('contact'),
// STATES
about: Em.Route.extend({
route: '/',
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('about');
}
}),
projects: Em.Route.extend({
route: '/projects',
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('projects');
}
}),
technology: Em.Route.extend({
route: '/technology',
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('technology');
}
}),
contact: Em.Route.extend({
route: '/contact',
connectOutlets: function (router, context) {
router.get('applicationController').connectOutlet('contact');
}
})
})
});
App.initialize();
});
