Sproutcore menu

Question

I'm starting to learn sproutcore(v1.7.1.beta). I am very concerned about the issues of proper implementation some things...one of them is main menu.

What the right way to do that?

I think I need to change state if menu item has been clicked, right? I tried to do it with SC.TemplateCollectionView , but can't understand, how to determine what item have been clicked?

My CollectionView:

App.MainMenuItemView = SC.TemplateCollectionView.extend({
  contentBinding: 'App.mainMenuController',
  mouseUp: function(){
    //
  }
});

Answer 1

You want to use

SC.SegmentedView . Something like

topNav: SC.SegmentedView.extend({
    classNames: ['top-nav'],
    items: [
        {
            title: "App.title1".loc(),
            value: 1,
            action: 'action1'
        },
        {
            title: "App.title2".loc(),
            value: 2,
            action: 'action2'

        },
        ....
    ],
    itemTitleKey: 'title',
    itemValueKey: 'value',
    itemWidthKey: '85',
    itemActionKey: 'action', 
    valueBinding: 'Binding to current tab value'
})          

You can specify an icon via itemIconKey ....

Or just roll your own custom SC.View.