在纸质对话框中获取聚合物纸质输入的输入值答案

【问题标题】：Getting the input value of a Polymer paper-input inside a paper-dialog在纸质对话框中获取聚合物纸质输入的输入值
【发布时间】：2015-02-27 04:29:27
【问题描述】：

我在纸质对话框中有一个纸质输入装饰器/输入，我需要从中获取值，但每次我这样做时都会返回“null”。这肯定与纸质对话框有关，因为当我从纸质对话框中删除输入时，它可以正常工作。

HTML：

<paper-dialog id="addGraph" backdrop transition="paper-dialog-transition-center">
        <div layout horizontal>
            <paper-button raised class="colored" self-center>Upload File</paper-button>
            <paper-input-decorator label="Enter URL for Dataset" floatingLabel error="A URL is required!" flex self-center>
                <input is="core-input" id="graphSource" required>
            </paper-input-decorator>
        </div>
</paper-dialog>
<paper-button affirmative hover onclick="addNewGraph()">Submit</paper-button>

Javascript：

function addNewGraph() {
    console.log(document.getElementById('graphSource'));
    var graphURL = document.getElementById('graphSource').value;
    /* a bunch of other code */
}

我看到了一些关于此的帖子，但它们似乎不完整，并且他们发布的“答案代码”似乎也不起作用 - 关于如何获得输入值的任何帮助将不胜感激

【问题讨论】：

标签： javascript polymer material-design

【解决方案1】：

根据 Jimi Dough10 的回答，我遇到了一个有趣的问题，即您必须将 {{showDiaolg}} 保留在聚合物元素内，这使得将其连接到不在内部的按钮是不可能的（或至少非常困难）模板。

我最终将其提取出来并将其编码到邮件 HTML 中，并将其中的所有其他内容保存在聚合物元素中。然后我将<test-element></test-element> 放在了

<body unresolved>
  <div layout horizontal center-justified>
    <paper-fab icon="add" role="button" id="openGraphAdd" onclick="document.querySelector('#addGraph').toggle()"></paper-fab>
  </div>
  <paper-dialog id="addGraph" backdrop transition="paper-dialog-transition-center">
    <test-element></test-element>
  </paper-dialog>

</body>

这是我从 Jimi 的回答中分叉出来的稍微修改的 Plunker - 它基本上只是让按钮更灵活一点：

http://plnkr.co/edit/PLoy4y6y6vUpb7fsHntt?p=preview

【讨论】：

您可以从该元素外部访问 showDialog 方法。你只需要调用 document.querySelector('test-element').showDialog();

【解决方案2】：

我解决了这个问题一分钟，我不确定为什么我不能让事情按照我认为的那样工作。

我复制了你的代码并做了一个 plunker。我能够让你的代码基本上像你现在一样工作。但是如果我在对话框中移动了提交纸张按钮，它会将所有返回数据更改为空。如果我将它包装在一个自定义元素中，我可以使用对话框内部或外部的提交按钮让一切工作。

我不确定这是什么原因，因为我还没有遇到过这样的问题。但我会说功能的最佳选择是将其包装到自定义元素中。

这个 plunker 是我在没有自定义元素的情况下工作的地方。关闭对话框时显示的按钮将毫无问题地获取纸张输入值的值。但是调用相同函数的对话框中的提交按钮仍然返回 null。

http://plnkr.co/edit/X8SHCCBW3usZ5c6BrSmQ?p=preview

这是我使用一个可工作的自定义元素和两个按钮返回输入值的 plunker。

<polymer-element name="test-element">
  <template>
    <paper-dialog id="addGraph" backdrop transition="paper-dialog-transition-center">
      <div id="div" layout horizontal>
        <paper-button raised class="colored" self-center>Upload File</paper-button>
        <paper-input-decorator label="Enter URL for Dataset" floatingLabel error="A URL is required!" flex self-center>
          <input is="core-input" id="graphSource" required>
        </paper-input-decorator>
        <paper-button affirmative hover on-tap="{{addNewGraph}}">Submit</paper-button>
      </div>
    </paper-dialog>
    <paper-button affirmative hover on-tap="{{addNewGraph}}">Submit</paper-button>
    <paper-button affirmative hover on-tap="{{showDialog}}">Show Dialog</paper-button>
  </template>
  <script>
    Polymer("test-element",{
      showDialog: function () {
        this.$.addGraph.toggle();
      },
      addNewGraph: function () {
        console.log(this.$.graphSource.value);
      }
    })
  </script>
</polymer-element>

http://plnkr.co/edit/yr1pLc05VYZ6c9OwsvOH?p=preview

【讨论】：

很奇怪吧？我也不太清楚为什么它会以这种方式做出反应（我发现一个文档曾经提到这是因为“输入”位于影子 DOM 中，但我仍然无法梳理出来） - 我最终或多或少地按照您在答案第二部分中的建议进行（最终将大量代码拉入 Polymer 元素，但也许没关系）