在紙對話框中獲取聚合物紙張輸入的輸入值

我在紙對話框中有一個紙輸入裝飾器/輸入，我需要從中獲取值，但是每次都得到該值返回'空'。這肯定與紙對話有關，因爲當我從紙對話框中刪除輸入時，它可以正常工作。在紙對話框中獲取聚合物紙張輸入的輸入值

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

在紙對話框中獲取聚合物紙張輸入的輸入值

回答

相關問題