Question

我正在将一个网站从Angular转换为Web组件/聚合物。我需要的是在提交表单时调用名为<ul class="nav navbar-nav" ng-controller="AwesomeController"> <li data-ng-if="tokenString.AccessPara.indexOf('test1') !== -1"><a href="#BrokerageSearch">test1</a></li> </ul>的函数。但是，我不确定如何正确定义功能。

（只是相关的） HTML

lookupUser()

的Javascript

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

忽略我尚未从函数中删除的角度，如何正确定义此函数以便可以从(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);调用？

Answer 1

在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部分对此进行了介绍。

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

1 个答案: