重複元素上的​​事件處理程序

Question

我是hyperHTML的新手，並正在嘗試使用它。這是我的問題。如何爲重複的模板元素添加事件處理程序。這裏是我的web組件：

import css from './component.css'; 
 
import isJson from '../utils/isJson.js'; 
 
const hyper = hyperHTML; 
 

 
class IdxAdminTab extends HTMLElement { 
 
    constructor() { 
 
    super(); 
 
    this.attachShadow({mode: 'open'}); 
 
    } 
 

 
    attributeChangedCallback(name, oVal, nVal) { 
 
    if (name === 'tabs' && isJson(nVal)) { 
 
     this.tabs = JSON.parse(nVal); 
 
     this.tabs.forEach((tab) => { 
 
     tab.number = parseInt(tab.number, 10).toLocaleString(); 
 
     }); 
 
     this.updateView(); 
 
    } 
 
    } 
 

 
    clearSelections() { 
 
    this.tabs.forEach((tab) => { 
 
     tab.selected = false; 
 
    }); 
 
    } 
 

 
    connectedCallback() { 
 
    this.updateView(); 
 
    } 
 

 
    currentlySelected() { 
 
    return this.tabs.find((tab) => tab.selected); 
 
    } 
 

 
    disconnectedCallback() { 
 
    
 
    } 
 

 
    tabSelected(evn) { 
 
    
 
    } 
 

 
    updateView() { 
 
    hyper(this.shadowRoot)` 
 
     <style>${css}</style> 
 
     <div id="tab-container"> 
 
     ${this.tabs.map(tab => ` 
 
     <div class="${tab.selected ? 'selected' : ''}" id="${tab.id}" onclick="${this.selectedTab}"> 
 
      <div class="name">${tab.name}</div> 
 
      <div class="number">${tab.number}</div> 
 
     </div> 
 
     `)} 
 
     </div> 
 
     `; 
 
    } 
 

 
    static get observedAttributes() { 
 
    return ['tabs']; 
 
    } 
 
} 
 

 
customElements.define('idx-admin-tab', IdxAdminTab); 
 

 
export { IdxAdminTab };

我想在反覆選項卡中添加一個單擊處理程序和註冊tabSelected的處理程序。我已經添加了點擊事件處理拋出一個未捕獲的語法錯誤：

(function(event){[object HTMLElement] 
 
})

Answer 1

你的地圖返回純字符串，所以你的點擊處理程序不指向一個功能，而是一個字符串表示你的功能。

 ${this.tabs.map(tab => ` 
     <div class="${tab.selected ? 'selected' : ''}" id="${tab.id}" onclick="${this.selectedTab}"> 
      <div class="name">${tab.name}</div> 
      <div class="number">${tab.number}</div> 
     </div> 
     `)} 

使用

hyperHTML.wire(tab)`<div>...</div>` 

代替。 CodePen

Answer 2

有兩個與您的代碼的小問題：

1. 要返回如前所述
2. 你是沒有約束力的處理程序只是一個字符串

當你使用模板字面它容易忘記那些只是字符串。 您需要返回應始終指向同一選項卡的DOM節點（或導線）。

我假設tab.id是唯一的，我用它們作爲綁定到組件本身的標識符。 這是一個更好的版本：

class IdxAdminTab extends HTMLElement { 
    constructor() { 
    super(); 
    this.selectedTab = this.selectedTab.bind(this); 
    this.render = hyper(this.attachShadow({mode: 'open'})); 
    this.updateView(); 
    } 

    selectedTab(e) { 
    console.log('tab selected'); 
    } 

    updateView() { 
    this.render` 
     <style>${css}</style> 
     <div id="tab-container"> 
     ${this.tabs.map(tab => hyper(this, `:${tab.id}`)` 
     <div class="${tab.selected ? 'selected' : ''}" id="${tab.id}" onclick="${this.selectedTab}"> 
      <div class="name">${tab.name}</div> 
      <div class="number">${tab.number}</div> 
     </div> 
     `)} 
     </div>`; 
    } 

} 

正如你可以看到，你甚至可以使用{mode: 'closed'}而作爲渲染特性，一旦分配shadowRoot。

現在你有一個完整的工作組件。

但是，hyperHTML自帶一個名爲HyperHTMLElement的自定義元素幫助程序，查看其實用程序，也許它會讓您的生活更輕鬆。