Question

我是hyperHTML的新手并正在尝试它。这是我的问题。如何为重复的模板元素添加事件处理程序。这是我的网络组件：

＆＃13;

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 };

＆＃13;

我想在重复的标签中添加一个点击处理程序，并将tabSelected注册为处理程序。我添加的单击处理程序抛出了未捕获的语法错误：

＆＃13;

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

＆＃13;

Answer 1

您的代码存在两个小问题：

如前所述，您只返回一个字符串
你没有绑定你的处理程序

当您使用模板文字时，很容易忘记那些只是字符串。您需要返回应始终指向同一选项卡的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>`;
  }

}

正如您所看到的，您甚至可以在将shadowRoot指定为渲染属性时使用{mode: 'closed'}。

现在你有一个完全正常工作的组件。

然而，hyperHTML带有一个名为HyperHTMLElement的自定义元素助手，看看它的实用程序，也许它会让你的生活更轻松。

Answer 2

您的地图返回纯字符串，因此您的单击处理程序不指向函数，而是指向函数的字符串表示形式。

      ${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

重复元素

2 个答案: