我已经实现了一个SettingsFlyout。从该弹出窗口的 View 来看，我的应用程序从用户(名字)收集了一些信息，并希望将其存储在漫游设置中。当用户单击设置 View 中的按钮时，此信息将被存储，并在弹出窗口的 beforeShow 事件中检索。这两个事件是在 SettingsFlyout 本身的就绪函数中设置的，但由于某种原因，该就绪函数没有被调用。结果，事件没有结果并且没有被调用。现在让我向您展示代码。这是我在 default.html 中的内容
app.onsettings = function (e) {
e.detail.applicationcommands = {
"test": {
href: "/pages/settings/test/test.html",
title: "Test"
}
}
WinJS.UI.SettingsFlyout.populateSettings(e);
};
这是 test.html 本身。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/pages/settings/test/test.css" rel="stylesheet" />
</head>
<body>
<div
data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'test', width:'narrow'}">
<div class="win-header">
<div class="win-label">test</div>
</div>
<div class="win-content">
First Name: <input id="firstname" />
<br />
<input type="submit" value="Save" />
</div>
</div>
</body>
</html>
这是 test.js 文件。
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/settings/test/test.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.
var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
var divtest = document.getElementById("test").winControl;
var firstname = document.getElementById("firstname");
document.getElementById("submit").onclick = function (e) {
//alert('hi');
roamingSettings.values["firstname"] = firstname.value;
}
divtest.addEventListener("beforeshow", function () {
firstname.value = roamingSettings.values["firstname"];
});
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in viewState.
}
});
})();
我在这里做错了什么以及如何调用准备好的函数？
最佳答案
看起来像<script>标签 test.js test.html 中缺少
<head>
<title></title>
<link href="/pages/settings/test/test.css" rel="stylesheet" />
<script src="/pages/settings/test/test.js"></script>
</head>
欢迎评论。 html 丢失 id这些元素的属性。因此，getElementById正在失败。话虽如此document.getElementById()不一定是实现这一目标的最佳方法。考虑使用 class html 中的属性和 element.querySelector('.myclass')它将查询范围限定为页面的根元素；跨页面的 id 冲突范围也被删除。
<div id="test"
data-win-control="WinJS.UI.SettingsFlyout" data-win- options="{settingsCommandId:'test', width:'narrow'}">
<div class="win-header">
<div class="win-label">test</div>
</div>
<div class="win-content">
First Name: <input id="firstname" />
<br />
<input id='submit' type="submit" value="Save"
关于javascript - 为什么我的 SettingsFout 上的就绪函数没有被命中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17354760/