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。如果我将它包装在一个自定义元素中，我可以使用对话框内或外部的提交按钮来处理所有内容。

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

这个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

Answer 2

解决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

在纸张对话框中获取聚合物纸张输入的输入值

2 个答案: