Полимер: вручную представляет форму

Question

В полимере я пытаюсь вручную отправить форму. Моя форма выглядит следующим образом:

<form id="myForm" on-submit="{{ submitForm }}"> 
    <input class="text" value="{{ someValue}}"> 
    <button type="submit">Submit</button> 
</form> 

И в объекте полимера у меня есть:

submitForm: function(e) { 
    e.preventDefault(); 
} 

Всякий раз, когда я пытаюсь сделать следующее:

document.getElementById('myForm').submit(); 

форма полностью игнорирует on- передать атрибут и отправить форму на новую страницу.

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

Кто-нибудь знает, почему это происходит?

JSBin пример, чтобы показать вам точную проблему (см предупреждения): http://jsbin.com/wadihija/2/

Answer 1

С MDN page о submit:

onsubmit обработчик событий формы не будет срабатывать при вызове этого метода ... это не гарантируется быть вызвана пользовательскими агентами HTML.

Однако, называя click кнопку в submit типа, кажется, работает. Смотрите здесь:

http://jsbin.com/tuxac/2/edit

Вот модификации вашего jsbin, что я считаю, делает то, что вы хотите:

http://jsbin.com/wadihija/6/edit

Answer 2

Is this вдоль линий, что вы пытаетесь сделать? Это результат ключевой функции Shadow DOM: Encapsulation. Элементы в шаблоне вашего полимерного элемента не входят в основной документ и, как таковые, недоступны через document.getElementById() и тому подобное.

Вы можете вместо этого позвонить this.shadowRoot.getElementById() и it would work, потому что в прототипе вашего полимерного элемента находится this, связанный с элементом-хозяином. Или даже лучше, воспользуйтесь потрясающими функциями, которые Polymer дает вам бесплатно. Полимер предоставляет this.$ полимерным элементам, который содержит ключ для каждого элемента вашего шаблона с идентификатором! Нет необходимости в вызове метода, просто используйте . Here's the final jsbin.