javascript - 获取纸张对话框内 polymer 纸张输入的输入值

Question

我在纸质对话框中有一个纸质输入装饰器/输入，我需要从中获取值，但每次我这样做都会返回“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 */
}

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

Answer 1

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

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

我不确定这样做的原因，因为到目前为止我还没有遇到过类似的问题。但我想说，功能的最佳选择是将其包装到自定义元素中。

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

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

这是我用一个工作自定义元素制作的插件，两个按钮都返回输入的值。

<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