在紙張對話框中獲取聚合物紙張輸入的輸入值
[英]Getting the input value of a Polymer paper-input inside a paper-dialog
問題描述
我在紙張對話框中有一個紙張輸入裝飾器/輸入，我需要從中獲取值，但是每次執行此操作時，我都會返回“ 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 */
}
我看到了一些關於此的帖子，但它們似乎不完整，並且他們發布的“答案代碼”似乎也沒有用-對我如何獲得輸入值的任何幫助將不勝感激
2 個解決方案
解決方案1
1 已采納 2014-12-31 13:00:04
我花了一個分鍾來解決這個問題，我不確定為什么我無法按我認為的那樣讓事情正常進行。
我復制了您的代碼，做了一個小家伙。 我現在能夠使您的代碼基本正常工作。 但是，如果我在對話框中移動了提交紙張按鈕，它將所有返回數據更改為null。 如果我將其包裝在自定義元素中，則可以使用對話框內部或外部的提交按鈕使所有內容正常工作。
我不確定原因，因為到目前為止我還沒有這樣的問題。 但我想說，功能的最佳選擇是將其包裝到自定義元素中。
這是我沒有自定義元素的地方。 對話框關閉時顯示的按鈕將獲取紙張輸入值的值而不會出現問題。 但是對話框中調用同一函數的提交按鈕仍返回null。
http://plnkr.co/edit/X8SHCCBW3usZ5c6BrSmQ?p=preview
這是我使用一個可工作的自定義元素處理的the子，兩個按鈕都返回了輸入值。
<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>
解決方案2
0 2014-12-31 23:18:30
在解決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-它基本上只是使按鈕更加靈活：
紙張輸入值不可訪問聚合物
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.