WinJS AutoSuggestBox 无法正确呈现答案

【问题标题】：WinJS AutoSuggestBox doesn't render properlyWinJS AutoSuggestBox 无法正确呈现
【发布时间】：2015-07-25 14:15:56
【问题描述】：

我正在使用此链接上第一个示例中的 WinJS.UI.AutoSuggestBox：http://try.buildwinjs.com/#searchbox:simplelist1

我复制了完全相同的代码以确保我没有犯任何错误，但它仍然无法正确呈现。我不知道可能是什么问题。

PS：Data.animeList 是在 default.js 上定义的命名空间，它可以正常工作，我一直在其他页面上使用它。它是一个字符串数组，就像上面提到的例子一样。使用示例中提供的数组得到同样的结果。

这是显示问题所在的图像（嗯，它没有渲染，所以你什么都看不到）：http://i.imgur.com/e0VYWB5.png

这里是代码：

// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.UI.processAll().then(function () {

                // Renders the anime list view.
                //var animeListView = document.getElementById("animeList");
                //animeListView.winControl.header = Renderer._animeListHeaderTemplate;
                //animeListView.winControl.itemDataSource = Data.animeListData.dataSource;
                //animeListView.winControl.itemTemplate = Renderer._animeListTemplate;
                //animeListView.winControl.layout = new WinJS.UI.GridLayout();
            });


        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        },
    });

    var suggestionList = Data.animeList;

    function suggestionsRequestedHandler(eventObject) {
        var queryText = eventObject.detail.queryText,
        query = queryText.toLowerCase(),
        suggestionCollection = eventObject.detail.searchSuggestionCollection;
        if (queryText.length > 0) {
            for (var i = 0, len = suggestionList.length; i < len; i++) {
                if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
                    suggestionCollection.appendQuerySuggestion(suggestionList[i]);
                }
            }
        }
    };

    function querySubmittedHandler(eventObject) {
        var queryText = eventObject.detail.queryText;
        WinJS.log && WinJS.log(queryText, "sample", "status");
    };

    WinJS.Namespace.define("Sample", {
        suggestionsRequestedHandler: WinJS.UI.eventHandler(suggestionsRequestedHandler),
        querySubmittedHandler: WinJS.UI.eventHandler(querySubmittedHandler)
    });


})();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>home</title>

    <link href="home.css" rel="stylesheet" />
    <script src="home.js"></script>
</head>
<body>
    <!-- Home page. -->
    <div class="fragment">

        <!-- Header of the home page. -->
        <header aria-label="Header content" role="banner">

            <!-- Back button for navigation between pages. -->
            <button data-win-control="WinJS.UI.BackButton"></button>

            <!-- Page title. -->
            <h1 class="titlearea win-type-ellipsis">Anime Manager</h1>

            <!-- Navbar. -->
            <div class="navbar">
                <button type="button">Profile</button>
                <button type="button">Settings</button>
              
                <!-- The AutoSuggestBox -->
                <div style="background: red; display: inline-block; margin: 15px 0;" data-win-control="WinJS.UI.AutoSuggestBox" data-win-options="{
                     placeholderText: 'Type a show',
                     onsuggestionsrequested: Sample.suggestionsRequestedHandler,
                     onquerysubmitted: Sample.querySubmittedHandler
                     }"></div>
                <!--<input type="search" placeholder="Search a show..." />-->
            </div>

        </header>

        <!-- Body of the home page. -->
        <section class="page-section" aria-label="Main content" role="main">
            <div id="testes"></div>

            <!-- Anime list view. -->
            <!--<div id="animeList" data-win-control="WinJS.UI.ListView" data-win-options="{header: select('.header')}"></div>-->
        </section>

    </div>
</body>
</html>

【问题讨论】：

标签： javascript microsoft-metro winjs

【解决方案1】：

我发现了问题。我的 WinJS 已经过时了 - 我使用的是 WinJS 3，这个功能适用于 WinJS 4。

【讨论】：