Web 组件：在 class 中定义函数，内联访问

Question

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

（只是相关的）HTML

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

Javascript

(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);

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

Answer 1

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

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

然后，在您的 class 中，您想定义一个 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 部分对此进行了介绍。

Web 组件：在 class 中定义函数，内联访问

Web Components: Defining a function in class, access inline

javascript

web-component

polymer