javascript - Web组件:在类中定义一个函数，内联访问

我正在将网站从Angular转换为Web组件/聚合物。我需要的是在提交表单时调用名为lookupUser()的函数。但是我不确定如何正确定义函数。



（只是相关的）HTML

<form name="userLookupForm" class="search" onsubmit="lookupUser();">



Java脚本

(function(customElements) {
class DashboardSearch extends PolymerMixins.LightDomMixin(Polymer.Element) {
    static get is() {
        return 'dashboard-search';
    }

    static get config() {
        return {
                properties: {
                    user: {
                        type: Object
                    },
                },
            };
        }

        lookupUser() {
            if (scope.userlookup) {
                $state.go('users', {
                    query: scope.userlookup
                });
            }
        };

    }
    customElements.define(DashboardSearch.is, DashboardSearch);
})(window.customElements);

忽略尚未从函数中删除的角度，如何正确定义此函数以便可以从onsubmit调用它？

最佳答案

在Polymer模板中，可以使用on-*注释语法声明性地添加事件侦听器。代替onsubmit="lookupUser();"，您需要使用on-submit="lookupUser"。注意，该值仅是方法的名称。没有括号或数据绑定括号（on-submit="[[lookupUser]]"是一个非常常见的错误）。

<form name="userLookupForm" class="search" on-submit="lookupUser">

然后，在您的类中，您想定义一个lookupUser方法。就像添加了addEventListener的事件侦听器一样，它将接收单个参数Event对象。

class DashboardSearch extends PolymerMixins.LightDomMixin(Polymer.Element) {
  static get is() {
    return 'dashboard-search';
  }
  static get config() {
    // ...
  }

  lookupUser(event) {
    console.log(event.target); // => logs <form> element
  }
}

官方文档的Handle and fire events部分对此进行了介绍。