如何使用winjs SplitViewCommand

Question

尝试开始使用一个使用 WinJS 4.3 和 SplitView 的简单应用程序。我正在关注 winjs 游乐场中的示例，该示例很好，但缺少更改内容区域所需的信息。我没有看到 SplitViewCommand 的任何文档，尽管我已经看到各种使用它的失败尝试（通过搜索）。所以我想要一个多页面应用程序（或在请求页面中加载的单页应用程序）。 SplitViewCommand 有什么权力？我可以将它指向 pages/page2/page2.html 之类的东西，还是必须使用 WinJS.Navigation.navigate()。我缺少命令和内容区域之间的胶水。谢谢。

Answer 1

看看WinJS Playground。您基本上需要在 SplitViewPanel 的内容区域中放置 contentHost。然后，当您 "navigate" 到一个新页面时，您只需在 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 on how to navigate. SplitView is no difference than with no control at all. You just need to handle the WinJS.Navigation 个事件

Answer 2

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

如何使用winjs SplitViewCommand

How to use winjs SplitViewCommand

winjs