Есть ли способ заменить мой компонент в DOM с его содержимым? - PullRequest
Новая
       40

Есть ли способ заменить мой компонент в DOM с его содержимым?

0 голосов
/ 28 февраля 2019

В настоящее время я использую стороннюю утилиту, которая называется JQXDocking.Это довольно простой и понятный дизайн.Изучив его на более глубоком уровне, хотя я подумал, что страница станет громоздкой, я абстрагировал все прикрепленные виджеты к пользовательским компонентам.

Проблема с концепцией jqxDocking заключается в том, что она ищет элементы div,и т. д. Я нарушаю дизайн, потому что вместо прямого дочернего элемента, являющегося div, это мой пользовательский компонент 

// What it was
<jqxDocking>
<div><div>title</div><div>content</div></div>
</jqxDocking>

// What it is now.
<jqxDocking>
  <my-component></my-component>
</jqxDocking>

inside my-component has the proper dom structure that jqxDocking is looking for.  So i was hoping for a way to replace in markup correctly such that the component works.

, поскольку из-за этого нового слоя в DOM родительский компонент не может правильно интерпретировать мой код.

Есть ли способ создать пользовательский компонент, но заменить его на шаблон html?

Так что, если я оберну его div, он получит часть своей реализации 

<jqxDocking>
  <div class=column">
    <div class="card">
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

но его заголовок не определен, потому что он не понимает заголовок, который находится в моем компоненте.

Так что я извлекаю это из компонента 

<jqxDocking>
  <div class="column">
    <div class="card">
      <div>Title</div>
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

Так что я мог это сделать, но этопросто не выглядит все так хорошо.Возможно, мне придется просто шаблонировать это в разметке, а не разбивать на части.

1 Ответ

0 голосов
/ 28 февраля 2019

Чтобы избежать наличия элемента my-component в выходном HTML, вы можете определить селектор компонента как селектор атрибута: 

selector: "[my-component]"

и установить этот атрибут для элемента контейнера в шаблоне: 

<jqxDocking my-component></jqxDocking>

См. этот стек для демонстрации.

...