Question

我有以下聚合物飞镖组件

  <!DOCTYPE html>

  <link rel="import" href="../../../shared/ui/delete-button-form.html">

  <polymer-element name='language-combo-form'>
    <template>
      <style>
        /* author style used ie website style*/
      </style>

      <form id='form'
            name='form'
            class='form round-corners'
            on-submit='submit'>

        <input id=langTxt type='text'
               list='langs'
               value="{{lang}}"
               placeholder='English'
               required
               on-change='{{submit}}'>

       <datalist id='langs' >
          <template repeat='{{lang in langs}}'>
            <option value='{{lang}}'>{{lang}}</option>
          </template>
       </datalist>

          <button id='submit-btn' type='submit' hidden='hidden'></button>

      </form>

    </template>

     <script type="application/dart;component=1">

     import 'package:polymer/polymer.dart';


      import 'package:epimss_polymer/events.dart';

      import 'dart:html';

      @CustomTag( 'language-combo-form')
      class LanguageComboForm extends PolymerElement
      {
        @observable String lang = '';

        List<String> langs = [  '', 
                                    'Basque', 'Bulgarian',
                                    'Catalan', 'Chinese - Simplified'

                                ];

        LanguageComboForm.created() : super.created();

        bool get applyAuthorStyles => true;

        void submit ( Event e, var detail, Node target )
        {
          //$['submit-btn'].click();

          $['form']
            .onSubmit
            .listen( ( Event e )
                 {
                    e.preventDefault();

                    dispatchEvent(
                              new CustomEvent( LANGUAGE_COMBO_FORM_EVENT,
                                               detail:{'lang':lang}));

                    print( 'submitted from onSubmit: $lang' );

                 });        
        }


      }

    </script>
  </polymer-element>

然而，提交方法中的代码......

  $['form']
            .onSubmit
            .listen( ( Event e )
                 {
                    e.preventDefault();

                    dispatchEvent(
                              new CustomEvent( LANGUAGE_COMBO_FORM_EVENT,
                                               detail:{'lang':lang}));

                    print( 'submitted from onSubmit: $lang' );

                 });

未被触发。

如果我取消注释提交方法中的第一行，则按照刷新页面的指示提交for，但仍然没有任何内容打印到控制台。

Answer 1

您需要将方法名称括在花括号中

  <form id='form'
        name='form'
        class='form round-corners'
        on-submit='{{submit}}'>

此代码使IMHO毫无意义（注释掉行）：

// $['form'].onSubmit.listen((Event e) {
  e.preventDefault();

  dispatchEvent(new CustomEvent('submit', detail: {
    'lang': lang
  }));

  print('submitted from onSubmit: $lang');
//});

为什么要在提交事件处理程序中订阅submit事件？

在表单中不触发onSubmit事件

1 个答案: