聚合物：显示对话框-Java 学习之路

我正在尝试使用聚合物纸张对话框来显示响应外部事件的消息，即使是简单的情况也很困难 . 我收到一个错误，说'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()

未定义

有任何想法吗？我敢肯定我必须做一些非常简单的错误！

1 回答

您必须将 this 上下文传递给方法 doTimer 和 element.openDialog ，以便 paper-dialog 在此方案中工作 . 这是工作示例

我建议你直接使用 ready 来自 ready 或 attached 元素的事件而不是 window.setTimeout .

在超时后打开 paper-dialog 的聚合方式将使用async，它将运行绑定到 this 的回调函数 . 你可以用 this.async(this.openDialog, 1000); 替换 window.setTimeout(doTimer.bind(this), 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>

回复于 2024-05-11T05:28:53+08:00

聚合物：显示对话框

1 回答

相关问题