纸对话中的聚合物纸对话

Question

我试图在点击 "base" 对话框上的确认按钮后显示确认对话框。此确认对话框永远不会出现。相反，当我点击它的肯定按钮时，"base" 对话框会立即关闭。

我该如何解决这个问题？提前致谢！

文件确认-dialog.html:

<link rel="import" href="https://polygit.org/components/PolymerElements/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="https://polygit.org/components/PolymerElements/paper-button/paper-button.html">
<dom-module id="confirm-dialog">
    <template>
        <paper-dialog>
            <h2>[[msgHeader]]</h2>
            <content></content>
            <div class="buttons">
                <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
                <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
Polymer({
    is:'confirm-dialog'
    ,behaviors:[Polymer.PaperDialogBehavior]
    ,properties:{
        msgHeader:String
        ,msgDismiss:String
        ,msgConfirm:String
    }
    ,show:function(){
        this.$$("paper-dialog").open();
    }
});
</script>

文件index.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/PolymerElements/paper-dialog/paper-dialog.html">
    <link rel="import" href="https://polygit.org/components/PolymerElements/paper-button/paper-button.html">
    <link rel="import" href="confirm-dialog.html">
</head>
<body>
<dom-module id="dialog-in-dialog">
    <template>
        <button on-tap="Button1Clicked">Open Base Dialog</button>
        <paper-dialog id="base">
            <h2>Base Dialog</h2>
            <p>This is base dialog.</p>
            <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
            <div class="buttons">
                <paper-button dialog-dismiss>Cancel</paper-button>
                <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
    var init=function(){
        Polymer({
            is:"dialog-in-dialog"
            ,Button1Clicked:function(){
                this.$.base.open();
            }
            ,OpenDialog2:function(){
                this.$$("confirm-dialog").show();
            }
        });
    };
    if(HTMLImports.ready)
        init();
    else
        HTMLImports.whenReady(init);
</script>
<dialog-in-dialog></dialog-in-dialog>
</body>
</html>

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/paper-dialog/paper-dialog.html">
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">


<dom-module id="confirm-dialog">
  <template>
    <paper-dialog>
      <h2>[[msgHeader]]</h2>
      <content></content>
      <div class="buttons">
        <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
        <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
      </div>
    </paper-dialog>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'confirm-dialog',
    behaviors: [Polymer.PaperDialogBehavior],
    properties: {
      msgHeader: String,
      msgDismiss: String,
      msgConfirm: String
    },
    show: function() {
      this.$$("paper-dialog").open();
    }
  });
</script>



<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <dom-module id="dialog-in-dialog">
    <template>
      <button on-tap="Button1Clicked">Open Base Dialog</button>
      <paper-dialog id="base">
        <h2>Base Dialog</h2>
        <p>This is base dialog.</p>
        <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
        </div>
      </paper-dialog>
    </template>
  </dom-module>
  <script>
    var init = function() {
      Polymer({
        is: "dialog-in-dialog",
        Button1Clicked: function() {
          this.$.base.open();
        },
        OpenDialog2: function() {
          this.$$("confirm-dialog").show();
        }
      });
    };
    if (HTMLImports.ready)
      init();
    else
      HTMLImports.whenReady(init);
  </script>
  <dialog-in-dialog></dialog-in-dialog>
</body>

</html>

[编辑] 我希望父项 paper-dialog 在其子项 paper-dialog 打开后保持打开状态。根据善良大师的帮助，我从父 paper-dialog 中删除了 paper-button，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../bc/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../bc/polymer/polymer.html">
    <link rel="import" href="../bc/paper-dialog/paper-dialog.html">
    <link rel="import" href="../bc/paper-button/paper-button.html">
    <link rel="import" href="confirm-dialog.html">
</head>
<body>
    <dom-module id="dialog-in-dialog">
        <template>
            <button on-tap="Button1Clicked">Open Base Dialog</button>
            <paper-dialog id="base">
                <h2>Base Dialog</h2>
                <p>This is base dialog.</p>
                <button on-tap="OpenDialog2">Break the window</button>
                <div class="buttons">
                    <paper-button dialog-dismiss>Exit</paper-button>
                </div>
            </paper-dialog>
            <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
        </template>
    </dom-module>
    <script>
        var init=function(){
            Polymer({
                is:"dialog-in-dialog"
                ,Button1Clicked:function(){
                    this.$.base.open();
                }
                ,OpenDialog2:function(){
                    this.$$("confirm-dialog").show();
                }
            });
        };
        if(HTMLImports.ready)
            init();
        else
            HTMLImports.whenReady(init);
    </script>
    <dialog-in-dialog></dialog-in-dialog>
</body>
</html>

Answer 1

您需要对当前代码进行两处更改才能使其正常工作

1. 您需要从 confirm-dialog 项中删除 behavior。由于您的元素本身不会打开，只会在内部调用 paper-dialog 的 open 函数，因此无需在您的自定义元素中导入 PaperDialogBehavior。
1. 您需要从要用于打开嵌套对话框的按钮中删除 dialog-confirm。添加它将关闭您的父对话框，因此您尝试打开嵌套对话框将失败。

或

1. 如果您想关闭第一个对话框并打开第二个对话框，您可以将 custom-dialog 元素移出 paper-dialog 而不是删除 dialog-confirm。这将在单击按钮时关闭父对话框并打开子对话框，如代码 here

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="https://polygit.org/components/polymer/polymer.html">
  <link rel="import" href="https://polygit.org/components/paper-dialog/paper-dialog.html">
  <link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
</head>

<body>
  <dom-module id="confirm-dialog">
    <template>
      <paper-dialog>
        <h2>[[msgHeader]]</h2>
        <content></content>
        <div class="buttons">
          <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
          <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
        </div>
      </paper-dialog>
    </template>
  </dom-module>
  <script>
    Polymer({
      is: 'confirm-dialog',
      properties: {
        msgHeader: String,
        msgDismiss: String,
        msgConfirm: String
      },
      show: function() {
        this.$$("paper-dialog").open();
      }
    });
  </script>

  <dom-module id="dialog-in-dialog">
    <template>
      <button on-tap="Button1Clicked">Open Base Dialog</button>
      <paper-dialog id="base">
        <h2>Base Dialog</h2>
        <p>This is base dialog.</p>

        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
        </div>
      </paper-dialog>
      <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
    </template>
  </dom-module>
  <script>
    var init = function() {
      Polymer({
        is: "dialog-in-dialog",
        Button1Clicked: function() {
          this.$.base.open();
        },
        OpenDialog2: function() {
          this.$$("confirm-dialog").show();
        }
      });
    };
    if (HTMLImports.ready)
      init();
    else
      HTMLImports.whenReady(init);
  </script>
  <dialog-in-dialog></dialog-in-dialog>
</body>

</html>

纸对话中的聚合物纸对话

polymer paper-dialog within paper-dialog

polymer

polymer-1.0

paper-elements