WinJS AutoSuggestBox doesn't render properly

问题

I am using the WinJS.UI.AutoSuggestBox from the first example on this link: http://try.buildwinjs.com/#searchbox:simplelist1

I copied the exact same code to make sure I was not making any mistakes on my part, but it still doesn't render correctly. I have no idea what the problem might be.

PS: the Data.animeList is a namespace defined on the default.js, it works correctly and I've been using it on other pages. It is an array of strings, just like the one on the example mentioned above. Using the array provided on the example resulted on the same thing.

Here is the image showing what the problem is (well, it's not rendering, so you won't be able to see anything): http://i.imgur.com/e0VYWB5.png

And here is the code:

// 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>

回答1:

I found the problem. My WinJS was outdated - I am using the WinJS 3 and this feature is for WinJS 4.

来源：https://stackoverflow.com/questions/31627362/winjs-autosuggestbox-doesnt-render-properly

标签

javascript

microsoft-metro

winjs