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部分。