Получение входного значения ввода полимерной бумаги внутри диалогового окна с бумагой

У меня есть документ-декоратор/входной документ в диалоговом окне с бумажным диалоговом окне, в котором мне нужно получить значение, но каждый раз, когда я делаю это, я получаю назад '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 */ 
}

Я видел несколько сообщений об этом, но они казались неполными и они отправили «ответ код», похоже, не работает, либо - Любая помощь на том, как я могу получить значение ввода, действительно был бы оценен

источник

2014-12-31 Mike

Я работал с этим в течение минуты, и я точно не знаю, почему я не мог заставить работу работать, как я думал, что нужно.

Я скопировал ваш код и сделал плункер. я смог заставить ваш код работать в основном так же, как и сейчас. но если бы я переместил кнопку подачи бумаги в диалоговом окне, она изменила все возвращаемые данные на нуль. если я упакую его в пользовательский элемент, я могу заставить все работать с кнопкой отправки внутри диалогового окна или извне.

Я не уверен, причина этого, поскольку у меня еще не было подобных вопросов. но я бы сказал, что лучший вариант для функциональности - обернуть это в пользовательский элемент.

этот плункер, где я работал над этим без специального элемента. кнопка, которая отображается при закрытии диалогового окна, без каких-либо проблем получает значение входного документа. но кнопка отправки внутри диалогового окна, вызывающего ту же функцию, возвращает значение 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

It супер странного права? Я не слишком уверен, почему он так реагирует (я нашел документ в какой-то момент, который упоминает, что это потому, что «вход» сидит в тени 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

Получение входного значения ввода полимерной бумаги внутри диалогового окна с бумагой

ответ

Смежные вопросы