聚合物：显示对话框

Question

我正在尝试使用 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" 样式="outline: medium none; display: none;">

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

未定义

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

未定义

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

Answer 1

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

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

Polymer 在超时后打开 paper-dialog 的方法是使用 async，这将运行回调函数绑定到 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>

聚合物：显示对话框

Polymer: Displaying a dialog

javascript

polymer

polymer-1.0