Adding a custom class to WinJS.UI.NavBarCommand

Question

I am programmatically creating a NavBar in WinJS like so:

var navEl = document.getElementById('win-navbar-container');    
var navBar = new WinJS.UI.NavBar(navEl);
var containerEl = document.createElement('div');
var navBarContainer = new WinJS.UI.NavBarContainer(containerEl);
var data = [
    { 'label': 'Test 1', 'icon': 'world' },
    { 'label': 'Test 2', 'icon': 'world' },
    { 'label': 'Test 3', 'icon': 'world' }
]
var itemList = new WinJS.Binding.List(data);
navBarContainer.data = itemList    

The problem is that I need to add my own custom class to the navBarCommands.

Is there any option that I can add to my array to will accomplish this?

Thank you in advance.

Answer 1

You can manage this by providing a template object with a custom render function to the NavBarContainer:

var navEl = document.getElementById('navbar');
var navBar = new WinJS.UI.NavBar(navEl);
var containerEl = document.createElement('div');
navEl.appendChild(containerEl);

var template = {
    render: function (item, navbarCommandEl) {
        navbarCommandEl.classList.add(item.state);
    }
};
var navBarContainer = new WinJS.UI.NavBarContainer(containerEl, {
    template: template
});
var data = [
    { label: 'Test 1', icon: 'world', state: 'bold' },
    { label: 'Test 2', icon: 'world', state: 'normal'},
    { label: 'Test 3', icon: 'world', state: 'underlined' }
]
var itemList = new WinJS.Binding.List(data);
navBarContainer.data = itemList;

Hope that helps! :)