Polymer 纸张对话按钮意外行为_Polymer_Web Component_Paper Elements

Polymer 纸张对话按钮意外行为

polymer

Polymer 纸张对话按钮意外行为,polymer,web-component,paper-elements,Polymer,Web Component,Paper Elements,我在做一个项目，设计一个地板灯的布局，如下所示： <style> .big { --iron-icon-height: 200px; --iron-icon-width: 200px; } </style> <template> <paper-button data-dialog="actions" onclick="clickHandler(event)"> <iron-icon c

我在做一个项目，设计一个地板灯的布局，如下所示：

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>

主页：index.html

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Polymer Starter Kit">
  <title>Test setup</title>

  <!-- Place favicon.ico in the `app/` directory -->
  <meta name="theme-color" content="#2E3AA1">

  <!-- Web Application Manifest -->
  <link rel="manifest" href="app/manifest.json">

  <!-- Tile color for Win8 -->
  <meta name="msapplication-TileColor" content="#3372DF">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="PSK">
  <link rel="icon" sizes="192x192" href="app/images/touch/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
  <link rel="apple-touch-icon" href="app/images/touch/apple-touch-icon.png">

  <!-- Tile icon for Win8 (144x144) -->
  <meta name="msapplication-TileImage" content="app/images/touch/ms-touch-icon-144x144-precomposed.png">

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="app/styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="app/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- endbuild -->

  <!-- Because this project uses vulcanize this should be your only html import
       in this file. All other imports should go in elements.html -->
  <link rel="import" href="app/elements/elements.html">

  <link rel="import" href="floor-map/floor-1.html">
  <link rel="import" href="floor-map/floor-2.html">
  <link rel="import" href="lighting-gui/light-panel.html">

  <!-- For shared styles, shared-styles.html import in elements.html -->
  <style is="custom-style" include="shared-styles"></style>

</head>

<body unresolved>
  <span id="browser-sync-binding"></span>
  <template is="dom-bind" id="app">

    <paper-drawer-panel id="paperDrawerPanel">
      <!-- Drawer Scroll Header Panel -->
      <paper-scroll-header-panel drawer fixed>
      </paper-scroll-header-panel>

      <!-- Main Area -->
      <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
        <!-- Main Toolbar -->
        <paper-toolbar id="mainToolbar" class="tall">
          <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>

          <span class="space"></span>

          <!-- Application name -->
          <div class="middle middle-container">
            <div class="app-name">Test</div>
          </div>

          <!-- Application sub title -->
          <div class="bottom bottom-container">
            <div class="bottom-title">The future of intelligent lighting system</div>
        </div>
        </paper-toolbar>

        <div style="background-color: #842dce">
            <paper-tabs attr-for-selected="data-route" selected="[[route]]">
                    <paper-tab link><a data-route="floor1" href="{{baseUrl}}">Floor-1</a></paper-tab>
                    <paper-tab link><a data-route="floor2" href="{{baseUrl}}floor2">Floor-2</a></paper-tab>
                    <paper-tab link><a data-route="floor3" href="{{baseUrl}}floor3">Floor-3</a></paper-tab>
                    <paper-tab link><a data-route="floor4" href="{{baseUrl}}floor4">Floor-4</a></paper-tab>
                    <paper-tab link><a data-route="floor5" href="{{baseUrl}}floor5">Floor-5</a></paper-tab>
                    <paper-tab link><a data-route="floor6" href="{{baseUrl}}floor6">Floor-6</a></paper-tab>
             </paper-tabs>

        </div>

        <!-- Main Content -->
        <div class="content">
          <iron-pages attr-for-selected="data-route" selected="{{route}}">

          <!-- This is floor maps: -->
          <section data-route="floor1">
              <paper-material elevation="1">
                <h2>Floor 1.</h2>
                <floor1-view></floor1-view>
              </paper-material>
          </section>
          <section data-route="floor2">
              <paper-material elevation="1">
                <h2>This is floor 2.</h2>
                <floor2-view></floor2-view>
              </paper-material>
          </section>
          <section data-route="floor3">
              <paper-material elevation="1">
                <h2>This is floor 3.</h2>
              </paper-material>
          </section>
          <section data-route="floor4">
              <paper-material elevation="1">
                <h2>This is floor 4.</h2>
              </paper-material>
          </section>
          <section data-route="floor5">
              <paper-material elevation="1">
                <h2>This is floor 5.</h2>
              </paper-material>
          </section>
          <section data-route="floor6">
              <paper-material elevation="1">
                <h2>This is floor 6.</h2>
              </paper-material>
          </section>


       <!-- this is the lighting layout of floor-->   
          <section data-route="light-panel">
              <paper-material elevation="1">
                <h2>**Group 1:**</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel2">
              <paper-material elevation="1">
                <h2>**Group 2:**</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel3">
              <paper-material elevation="1">
                <h2>Group 3:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel4">
              <paper-material elevation="1">
                <h2>Group 4:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel5">
              <paper-material elevation="1">
                <h2>Group 5:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel6">
              <paper-material elevation="1">
                <h2>Group 6:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel7">
              <paper-material elevation="1">
                <h2>Group 7:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel8">
              <paper-material elevation="1">
                <h2>Group 8:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel9">
              <paper-material elevation="1">
                <h2>Group 9:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          <section data-route="light-panel10">
              <paper-material elevation="1">
                <h2>Group 10:</h2>
                <light-panel></light-panel>
              </paper-material>
          </section>

          </iron-pages>
        </div>
      </paper-scroll-header-panel>
    </paper-drawer-panel>

    <paper-toast id="toast">
      <span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
    </paper-toast>

  </template>

  <!-- build:js scripts/app.js -->
  <script src="app/scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>


测试设置
试验
智能照明系统的未来
一楼。
这是二楼。
这是三楼。
这是四楼。
这是五楼。
这是六楼。
**第一组：**
**第2组：**
第3组：
第4组：
第5组：
第6组：
第7组：
第8组：
第9组：
第10组：
好啊

我创建的一些辅助元素为：

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>

group-map.html

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>


.大{
--铁图标高度：200px；
--铁图标宽度：200px；
}
光剖面
聚合物（{
是：“组地图”
}); 
函数clickHandler（e）{
var按钮=e.target；
而（！button.hasAttribute（'data-dialog'）&&button！==document.body）{
button=button.parentElement；
} 
如果（！button.hasAttribute（'data-dialog'））{
返回；
} 
var id=button.getAttribute（'data-dialog'）；
var dialog=document.getElementById（id）；
如果（对话框）{
log（“打开调用的对话框”）；
dialog.open（）；
log（“打开调用的对话框”）；
} 
}

light-page.html

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>


.按钮1{
@应用（--水平布局）；
@应用（--布局开始对齐）；
}
.按钮3{
@应用（--水平布局）；
@应用（--布局结束对齐）；
}
纸张滑块{
--纸张滑块高度：5px；
}
在…上
关
提交
聚合物（{
是：“轻页”
});

light-panel.html

<style>
  .big {
    --iron-icon-height: 200px;
    --iron-icon-width: 200px;
  }
</style>

<template>
      <paper-button data-dialog="actions" onclick="clickHandler(event)">
          <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon>
      </paper-button>

      <paper-dialog id="actions"> 
          <h2>Light Profile</h2> 
              <light-page></light-page>
      </paper-dialog> 
</template>
 </dom-module> 


<script> 
     Polymer({ 
        is: "group-map"
    }); 
</script> 

<script>
  function clickHandler(e) { 
      var button = e.target; 
      while (!button.hasAttribute('data-dialog') && button !== document.body) { 
        button = button.parentElement; 
      } 

      if (!button.hasAttribute('data-dialog')) { 
        return; 
      } 

      var id = button.getAttribute('data-dialog'); 
      var dialog = document.getElementById(id); 

      if (dialog) { 
          console.log("dialog open called.");
          dialog.open(); 
          console.log("dialog open called.");
      } 
    } 
</script>


.形象{
填充：2px；
边框颜色：蓝色；
边框宽度：2倍；
边框样式：实心；
宽度：150px；
高度：150像素；
}
.内容包装器{
背景：白色；
}
聚合物({
是：“灯面板”
});

floor-1.html


.形象{
填充：2px；
边框颜色：蓝色；
边框宽度：2倍；
边框样式：实心；
宽度：150px；
高度：150像素；
}
.内容包装器{
背景：白色；
}
聚合物({
是：“楼层视图”
});

light panel.html具有基于一个楼层的灯光地图，该楼层被划分为多个组。该组由floor-1.html表示。该组是图像url锚定标记的网格。所有URL都重定向到polymerindex.html页面的一部分。该部分是一个由纸张对话元素组成的网格。对话页面设计为light page.**html中描述的布局。对话元素在**group map.html中定义

<style> .big { --iron-icon-height: 200px; --iron-icon-width: 200px; } </style> <template> <paper-button data-dialog="actions" onclick="clickHandler(event)"> <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon> </paper-button> <paper-dialog id="actions"> <h2>Light Profile</h2> <light-page></light-page> </paper-dialog> </template> </dom-module> <script> Polymer({ is: "group-map" }); </script> <script> function clickHandler(e) { var button = e.target; while (!button.hasAttribute('data-dialog') && button !== document.body) { button = button.parentElement; } if (!button.hasAttribute('data-dialog')) { return; } var id = button.getAttribute('data-dialog'); var dialog = document.getElementById(id); if (dialog) { console.log("dialog open called."); dialog.open(); console.log("dialog open called."); } } </script>
问题是，它在索引页面中对Group-1工作正常，但是Group-2和其他对话框上的单击事件不起作用。尽管每个组都有在light panel.html中创建的完全相同的元素

<style> .big { --iron-icon-height: 200px; --iron-icon-width: 200px; } </style> <template> <paper-button data-dialog="actions" onclick="clickHandler(event)"> <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon> </paper-button> <paper-dialog id="actions"> <h2>Light Profile</h2> <light-page></light-page> </paper-dialog> </template> </dom-module> <script> Polymer({ is: "group-map" }); </script> <script> function clickHandler(e) { var button = e.target; while (!button.hasAttribute('data-dialog') && button !== document.body) { button = button.parentElement; } if (!button.hasAttribute('data-dialog')) { return; } var id = button.getAttribute('data-dialog'); var dialog = document.getElementById(id); if (dialog) { console.log("dialog open called."); dialog.open(); console.log("dialog open called."); } } </script>
注意：所有导入都很好，chrome源/控制台终端中没有错误

<style> .big { --iron-icon-height: 200px; --iron-icon-width: 200px; } </style> <template> <paper-button data-dialog="actions" onclick="clickHandler(event)"> <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon> </paper-button> <paper-dialog id="actions"> <h2>Light Profile</h2> <light-page></light-page> </paper-dialog> </template> </dom-module> <script> Polymer({ is: "group-map" }); </script> <script> function clickHandler(e) { var button = e.target; while (!button.hasAttribute('data-dialog') && button !== document.body) { button = button.parentElement; } if (!button.hasAttribute('data-dialog')) { return; } var id = button.getAttribute('data-dialog'); var dialog = document.getElementById(id); if (dialog) { console.log("dialog open called."); dialog.open(); console.log("dialog open called."); } } </script>
伙计们，我哪里做错了。
谢谢
很抱歉编辑。在group-map.html中，第一行未显示，这是：抱歉，进行了编辑。在gr中
<style> .big { --iron-icon-height: 200px; --iron-icon-width: 200px; } </style> <template> <paper-button data-dialog="actions" onclick="clickHandler(event)"> <iron-icon class="big" src="../lighting-images/lighting.png"></iron-icon> </paper-button> <paper-dialog id="actions"> <h2>Light Profile</h2> <light-page></light-page> </paper-dialog> </template> </dom-module> <script> Polymer({ is: "group-map" }); </script> <script> function clickHandler(e) { var button = e.target; while (!button.hasAttribute('data-dialog') && button !== document.body) { button = button.parentElement; } if (!button.hasAttribute('data-dialog')) { return; } var id = button.getAttribute('data-dialog'); var dialog = document.getElementById(id); if (dialog) { console.log("dialog open called."); dialog.open(); console.log("dialog open called."); } } </script>