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

我在纸对话框中有一个纸输入装饰器/输入，我需要从中获取值，但是每次都得到该值返回'空'。这肯定与纸对话有关，因为当我从纸对话框中删除输入时，它可以正常工作。在纸对话框中获取聚合物纸张输入的输入值

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 */ 
}

我看到这几个职位，但他们似乎不完整的，他们张贴的“答案代码”好像没工作，要么 - 任何帮助我怎样才能得到输入的价值将非常感谢

来源

2014-12-31 Mike

我曾与此工作了一分钟，我不确定为什么我不能让事情工作，因为我认为他们应该。

我复制你的代码，并做了一个笨蛋。我能够让你的代码基本上像现在这样工作。但如果我移动了对话框中的提交纸张按钮，它将所有返回数据都更改为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

来源

2014-12-31 13:00:04

它超级奇怪吧？我不太清楚为什么它会以这种方式反应（我发现一个文档在某一点上提到，这是因为“输入”是坐在阴影DOM中，但我仍然无法挑逗它） - 我结束了在你的答案的第二部分做了或多或少的建议（最终将很多代码拉入Polymer元素中，但也许没关系） – Mike

工作过吉米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>

里面这是我略作修改Plunker从吉米的答案分叉 - 它基本上刚才的按钮更灵活一点：

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

来源

2014-12-31 23:18:30 Mike

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

有趣 - 不知道谢谢！ – Mike

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

回答

相关问题