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

Question

我将一个网站从Angular转换为Web组件/聚合物。我需要的是在提交表单时调用一个名为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); 

忽略的角度，我还没有到时移除f rom函数，我该如何正确定义这个函数，以便可以从onsubmit调用它？

Answer 1

在聚合物模板中，可以使用on-*批注语法以声明方式添加事件侦听器。您需要使用on-submit="lookupUser"而不是onsubmit="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部分。