0

I am trying to highlight the current item in my navigation bar. This is my router:

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    root: Em.Route.extend({
        // EVENTS
        gotoList: Ember.Route.transitionTo('list'),
        gotoAbout: Ember.Route.transitionTo('about'),
        // STATES
        list: Em.Route.extend({
            route: '/list',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('list');
            },
            enter: function(router) {
                $('.active').removeClass('active');
                $('.nav-pills li.list').addClass('active');
            }
        }),
        about: Em.Route.extend({
            route: '/about',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('about');
            },
            enter: function(router) {
                $('.active').removeClass('active');
                $('.nav-pills li.about').addClass('active');
            }
        })
    })
});

This is not working.
Maybe I am using an incorrect function ("enter")?
How can I prevent the "enter" function duplication of list and about states?

Esailija
  • 138,174
  • 23
  • 272
  • 326
Naor
  • 23,465
  • 48
  • 152
  • 268
  • did you see that ? http://stackoverflow.com/questions/11628489/emberjs-how-to-mark-active-menu-item-using-router-infrastructure – sly7_7 Aug 01 '12 at 22:19
  • @sly7_7: Actually I see it but I didn't understand the answer. How his solution gives the active class to the selected menu item. – Naor Aug 01 '12 at 22:41
  • 1
    the key points are the selectedBinding in the parentView and the isActive computedProperty in the children views. When in the router he sets the selected property to the controller, the selected property of parent view changes, so the computed property in the children views changes, and finally, sets the class active or unset it. – sly7_7 Aug 01 '12 at 22:47
  • @sly7_7: Thanks for the explanation but what is 'selectedBinding: "controller.selected"', 'property("item", "parentView.selected")' and "cacheable()"? – Naor Aug 03 '12 at 01:01
  • 2
    Wow, that's for me the base concepts of ember (an others MV* libs/frameworks). I recommend you to read http://emberjs.com/documentation. Even it's not totally update with the last version, it will give you the main keys to begin with Ember. – sly7_7 Aug 03 '12 at 06:47
  • @sly7_7 : Look, I've read it and build a single page application with it. I didn't find any selectedBinding parameter and no reference about "item"! I understand what .property() does and this is from the docs. You can write an answer and earn an extra points or you can send me to another tutorial that will not help me (and others with the same problem). Thanks for your answers up to now. – Naor Aug 03 '12 at 17:39
  • I'm sorry, but when I read your question, and this one "emberjs - how to mark active menu item using router infrastructure", they seem to have the same purpose. One way to prevent the enter function duplication is to bind the is-active class on a property. And for me, the other answer is pretty good. Now, if it's not satisfying for you, I will not give you an other answer, as the link I've given is for me the best one. – sly7_7 Aug 03 '12 at 23:48
  • @sly7_7: Can you give me a link talking about 'selectedBinding', 'item' and 'controller.selected'? because I really can't find any useful information about it.. – Naor Aug 04 '12 at 11:36
  • bindings are described here: http://emberjs.com/documentation/#toc_bindings. Here, by doing selectedBinding: 'controller.selected', it means that when you change the 'selected' property on the view, it's reflected in the 'selected' property of the controller, and vice-versa. 'item' is just a property (as all properties) declared in the template, and used in the NavItemView. – sly7_7 Aug 04 '12 at 17:53
  • @sly7_7: Thanks! I managed to do it and it helps me to understand some things. – Naor Aug 05 '12 at 06:43

0 Answers0