gpt4 book ai didi

javascript - polymer :显示对话框

转载 作者:行者123 更新时间:2023-11-30 16:03:53 26 4
gpt4 key购买 nike

我正在尝试使用 Polymer 纸质对话框来显示消息以响应外部事件,即使是简单的案例也遇到困难。我收到一条错误消息“this.$: undefined”(参见下面的代码)。

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">

<dom-module id="dialogtest-main">
<template>
<paper-dialog id='goodbyeDialog' modal>
<p> Goodbye! </p>
<div class='buttons'>
<paper-button dialog-dismiss>Cancel</paper-button>
</div>
</paper-dialog>

<p align="center">Hello...</p>
</template>
<script>
doTimer = function() {
element.openDialog();
}

element = {
is: "dialogtest-main",
ready: function() {
window.setTimeout(doTimer, 1000);
console.log("ready");
},
openDialog: function() {
console.log("opening dialog");
this.$.goodbyeDialog.open();
}
};
Polymer(element);
</script>
</dom-module>

我通过在 openDialog 函数中放置一个断点并在控制台中执行来做了一些绝望的尝试:

this.$

未定义

this.$.goodbyeDialog

TypeError: this.$ 未定义

element.$.goodbyeDialog

TypeError: element.$ 未定义

document.getElementById("goodbyeDialog")

< paper-dialog modal=""id="goodbyeDialog"class="style-scope dialogtest-main x-scope paper-dialog-0"role="dialog"tabindex="-1"aria-hidden="true"aria-modal="true"style="outline: medium none; display: none;">

document.getElementById("goodbyeDialog").open()

未定义

document.getElementById("goodbyeDialog").toggle()

未定义

有什么想法吗?我确定我一定是犯了一些非常简单的错误!

最佳答案

您必须将 this 上下文传递给此 paper-dialog 的方法 doTimerelement.openDialog在这种情况下工作。这是工作示例

我建议您直接使用 ready 或元素的 attached 事件中的 this.openDialog() 而不是 window .setTimeout

在超时后打开 paper-dialog 的 Polymer 方法将使用 async这将运行绑定(bind)到 this 的回调函数。您可以将 window.setTimeout(doTimer.bind(this), 1000); 替换为 this.async(this.openDialog, 1000);

<!DOCTYPE html>
<html>
<head>

<title>Paperdialog-test</title>

<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/">

<link rel="import" href="paper-dialog/paper-dialog.html">

</head>
<body class="fullbleed">
<dialogtest-main></dialogtest-main>

<dom-module id="dialogtest-main">
<template>
<paper-dialog id='goodbyeDialog' modal>
<p> Goodbye! </p>
<div class='buttons'>
<paper-button dialog-dismiss>Cancel</paper-button>
</div>
</paper-dialog>

<p align="center">Hello...</p>
</template>
<script>
doTimer = function() {
element.openDialog.call(this);
}

element = {
is: "dialogtest-main",
ready: function() {
window.setTimeout(doTimer.bind(this), 1000);
console.log("ready");
},
openDialog: function() {
console.log("opening dialog");
this.$.goodbyeDialog.open();
}
};
Polymer(element);
</script>
</dom-module>
</body>
</html>

关于javascript - polymer :显示对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37319080/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com