Question

我在访问纸质对话框内的纸张输入元素时遇到问题。我似乎无法获得纸张输入的值，而它在纸张对话框中，我只得到返回值null。我知道有类似的东西。$。元素，但我对如何实际使用它感到困惑。纸质对话框是否必须位于自我绑定模板中？

Answer 1

一旦打开纸张对话框，它就会进入核心覆盖层的阴影中，从常规选择器中查找元素。如果对话框在自动绑定模板

中，你可以使用this。$。元素语法访问它的子节点

<body>
  <template id="app" is="auto-binding">
    // other html content
    <paper-dialog id="dialog">
      <paper-input id="input"></paper-input>
    </paper-dialog>
 </template>
 <script>
   (function () {
     var app = document.querySelector("#app");
     app.addEventListener('template-bound', function () {
       this.getValue = function () {
         return this.$.input.value;
       };
     });
   }());
 </script>
</body>

另一种选择是使用像之前一样的自动绑定模板，并为输入值创建一个声明性变量

<body>
  <template id="app" is="auto-binding">
    // other html content
    <paper-dialog id="dialog">
      <paper-input value="{{inputValue}}"></paper-input>
    </paper-dialog>
 </template>
 <script>
   (function () {
     var app = document.querySelector("#app");
     app.addEventListener('template-bound', function () {
       this.getValue = function () {
         return this.inputValue;
       };
     });
   }());
 </script>
</body>

使用自动绑定模板的方法是将对话框放在自定义元素中，并将其中的所有功能包含在其中，以允许您使用这些方法中的任何一种。

我希望这会有所帮助。

Polymer <paper-dialog>选择问题

1 个答案: