Блог

Я пытаюсь реализовать навигационный компонент, как показано на веб-сайте Ionics. https://ionicframework.com/docs/api/nav

Сценарий, которого я хочу достичь, заключается в том, что пользователь нажимает кнопку «нажмите, чтобы обновить» после нажатия на элемент, он должен вызвать функцию updateList(). Но каждый раз, когда он нажимает, появляется сообщение об ошибке: CustomElementRegistry.define: «nav-home» уже определен как пользовательский элемент»

Все дело в том, что когда эта функция вызывается, будет выполнен вызов ajax (в настоящее время прокомментирован), и будут возвращены новые данные, чтобы затем повторно заполнить компонент nav.

Мой вопрос в том, как я могу избежать этой проблемы, которую я получаю, и просто легко обновлять навигационные элементы.

Спасибо

Я добавил ссылку JSFiddle ниже, чтобы воспроизвести проблему

https://jsfiddle.net/pilotman/fq8bh347/1/

     function updateList() {
    
    //Ajax will go here instead of above structure and update techs here instead
    
      customElements.define('nav-home', class NavHome extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Nav</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen>
            <ion-list>
            ${techs.map(tech => `
                <ion-item button onclick="showDetail('${tech.title}')">
                  <ion-icon slot="start" name="logo-${tech.icon}" style="color: ${tech.color};"></ion-icon>
                  <ion-label>
                    <h3>${tech.title}</h3>
                  </ion-label>
                </ion-item>
            `).join('n')}
            </ion-list>
          </ion-content>
        `;
        }
      });
    }