Question

我有一个聚合物应用程序，它接受文本输入（ID）并返回＆＃34;是＆＃34;或＆＃34;不＆＃34;根据ID是否在列表中。理想情况下，用户可以按Enter键或单击＆＃34;查找＆＃34;按钮，以及＆＃34;搜索ID＆＃34;函数将被调用。

我可以不使用表单吗？如果我使用表单，我可以在不发送/发送/获取请求的情况下执行此操作吗？数据全部存储在元素的属性（数组）中。

<dom-module id="demo-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <paper-card heading="Search for ID">
      <div class="card-content">
        <paper-input id="input" always-float-label label="ID"</paper-input>
      </div>
    </paper-card>
  </template>

  <script>
    Polymer({

      is: 'demo-app',

      properties: {
        myIds: {
          type: Array,
          value: ['testID1', 'testID2'],
        },
        inputObj: {
          type: Object,
          value: function(){
            return this.$.input;
          }
        },
        userInput: {
          type: String,
        },
      },
      onEnter: function(){
        if(this.myIds.includes(this.userInput)) {
          console.log(this.userInput);
        }
      },

    });
  </script>
</dom-module>

Answer 1

聚合物的最佳实践是使用平台＆＃34;，在这种情况下，HTML（按钮的默认行为是提交其表格）＆amp;一些JavaScript将起作用。

具体来说，将输入包装在表单中并添加一个按钮：

<form id="demoAppForm">
  <paper-card heading="Search for ID">
    <div class="card-content">
      <paper-input id="input" always-float-label label="ID"</paper-input>
    </div>
    <button>Lookup</button>
  </paper-card>
<form>

然后为表单提交时设置一个事件监听器，preventDefault关于该事件（因此它不会做GET请求），并通过添加这些来做你想要的数据您Polymer({...})电话的功能：

attached: function() {
  this.listen(this.$.demoAppForm, 'submit', 'onSubmit');
},

onSubmit: function(event) {
  event.preventDefault();
  console.log('Lookup this:', this.$.input.value);
},

确保在分离元素时删除事件侦听器：

detached: function() {
  this.unlisten(this.$.demoAppForm, 'submit', 'onSubmit');
},

如何在提交Polymer纸张输入时调用函数？

1 个答案: