WinJS AutoSuggestBox无法正确呈现 [英] WinJS AutoSuggestBox doesn't render properly
问题描述
我在此链接的第一个示例中使用WinJS.UI.AutoSuggestBox: http://try.buildwinjs.com/#searchbox:simplelist1
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:Data.animeList是在default.js上定义的名称空间，它可以正常工作，我在其他页面上也一直在使用它.它是一个字符串数组，就像上面提到的示例中的字符串一样.使用示例中提供的数组会产生相同的结果.
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.
以下是显示问题所在的图像(嗯，它没有渲染，所以您将看不到任何东西): http://i.imgur.com/e0VYWB5.png
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
这是代码:
// 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>
推荐答案
我发现了问题.我的WinJS已过时-我正在使用WinJS 3，并且此功能适用于WinJS 4.
I found the problem. My WinJS was outdated - I am using the WinJS 3 and this feature is for WinJS 4.
这篇关于WinJS AutoSuggestBox无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
