Question

我尝试使用聚合物纸张对话框来显示响应外部事件的消息，即使是简单的情况也很困难。我收到一条错误说“这是。$：undefined＆＃39; （见下面的代码）。

<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。$ is undefined

element.$.goodbyeDialog

TypeError：element。$ is undefined

document.getElementById("goodbyeDialog")

＆LT;纸对话模式=＆＃34;＆＃34; ID =＆＃34; goodbyeDialog＆＃34; class =＆＃34; style-scope dialogtest-main x-scope paper-dialog-0＆＃34;角色=＆＃34;对话框＆＃34;的tabindex =＆＃34; -1＆＃34;咏叹调隐藏=＆＃34;真＆＃34;咏叹调模态=＆＃34;真＆＃34; style =＆＃34; outline：medium none; display：none;＆＃34;＆gt;

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

未定义

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

未定义

有什么想法吗？我确定我必须做一些非常简单的错误！

Answer 1

您必须将this上下文传递给方法doTimer和element.openDialog才能使此paper-dialog在此方案中正常工作。这是工作示例

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

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

＆＃13;

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

＆＃13;

聚合物：显示对话框

1 个答案: