Question

尝试使用WinJS 4.3和SplitView开始使用简单的应用程序。我在winjs操场上跟踪样本很好，但是缺少更改内容区域所需的信息。我没有看到SplitViewCommand的任何文档，虽然我已经看到各种失败的尝试使用它（通过搜索）。所以我想要一个多页面应用程序（或在请求的页面中加载的单页面应用程序）。 SplitViewCommand有什么功能？我可以将它指向pages / page2 / page2.html之类的内容，还是必须使用WinJS.Navigation.navigate（）。我错过了命令和内容区域之间的粘合剂。感谢。

Answer 1

看看WinJS Playground。您基本上需要在SplitViewPanel的内容区域中拥有contentHost。当您“导航”到新页面时，您只需在contentHost div上呈现该页面。

    <div class="splitView" data-win-control="WinJS.UI.SplitView">
        <!-- Pane area -->
        <div>
            <div class="header">
                <button
                    class="win-splitviewpanetoggle"
                    data-win-control="WinJS.UI.SplitViewPaneToggle"
                    data-win-options="{ splitView: select('.splitView') }"
                ></button>
                <div class="title">SplitView Pane area</div>
            </div>

            <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 id="contentHost" class="contenttext"><h2 class="win-h2">SplitView Content area</h2> 
        <!-- this is where pages are rendered -->
        </div>
    </div>

编辑：查看有关如何导航的this article。 SplitView没有任何区别，完全没有控制权。您只需处理WinJS.Navigation事件

Answer 2

经过大量的挖掘（我猜winjs还很新）我在codefoster website找到了答案。简而言之，您可以使用PageControlNavigator作为内容主机，并使用WinJS.Navigation.navigate（＆＃34; /pages/page2/page2.html"）作为更改页面的触发器。

如何使用winjs SplitViewCommand

2 个答案: