how to make a splitview menu on winjs

I am trying to make a universal app by javascript. I tried a sample on msdn website but the "nav-commands" class is not showing when you open the splitview. I use closedDisplayMode = 'none'.

<div id="app">
    <div class="header">
        <button class="win-splitviewpanetoggle"
                data-win-control="WinJS.UI.SplitViewPaneToggle"
                data-win-options="{ splitView: select('.splitView') }"></button>

    </div>
    <div class="splitView" data-win-control="WinJS.UI.SplitView"
         data-win-options="{ closedDisplayMode :'none' , openedDisplayMode : 'inline'}">
        <!-- Pane area -->
        <div><div class="header">
                 <div class="nav-commands">
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>

                 </div>  </div>

        <!-- Content area -->
        <div class="contenttext" id="clock"> </div>
    </div>
</div>

I am using this code which I found from http://try.buildwinjs.com/playground/ . But when I use the application the nac-commands are not shown it just shows splitview pane

Solution

I suppose you are using WinJS project template in VS. The newest WinJS project template in VS use WinJS 4.0.1. And for that version there is no WinJS.UI.SplitViewCommand Control.

[NavBarCommand is no longer available for use as of Windows Library for JavaScript (WinJS) 4.2. Instead, use SplitViewCommand. ]

See WinJS.UI.NavBarCommand.

So you can use WinJS.UI.NavBarCommand instead.

Or you can download the newest WinJS from here. Replace the WinJS library in your project, then edit the <script> and <link> tags to reference the new library in the index.html file.