Можно ли использовать jQuery с Lit-элементом?

Я хочу создать пользовательскую древовидную таблицу с элементом Lit, и мне просто интересно, смогу ли я как-то реализовать ее с помощью плагина сетки дерева jQuery.

Это лучшее, что у меня есть сейчас (это решение не тестировалось с элементом Lit):

Код:

var toggler = document.getElementsByClassName("caret");
var i;
var padding = 0;
console.log(this);
console.log(this.parentElement);
for (i = 0; i < toggler.length; i++) {
  console.log(toggler[i]);

  toggler[i].style.paddingLeft = (padding * 10) + "%";
  var list = toggler[i].parentElement.getElementsByClassName("name");
  var j;
  for (j = 0; j < list.length; j++) {
    list[j].style.paddingLeft = (padding * 15) + "%";
  }
  padding++;
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari */
  '
 transform: rotate(90deg);
}

.nested {
  display: none;
}

.active {
  display: block;
}

ul {
  width: 800px;
  /* change it to whatever you like */
  position: relative;
  /* these should be probably already set up by reset.css */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul:before,
ul:after {
  text-align: center;
  display: block;
  border: 1px solid black;
  border-bottom: 0;
  width: 48%;
}

li {
  text-align: left;
  width: 48%;
  float: left;
  border: 1px solid black;
  margin-bottom: -1px;
}

li:nth-child(even) {
  margin-left: -1px;
  background-color: antiquewhite;
}

.as-console-wrapper {
  max-height: 64px !important;
}
<ul id="myUL">
  <li><span class="caret"><span>Coffee</span></span>
    <ul class="nested">
      <li><span class="name">Coffee</span></li>
      <li><span>Timeline</span></li>
      <li><span class="name">Coffee</span></li>
      <li><span>Timeline</span></li>
      <li><span class="caret"><span>Coffee</span></span>
        <ul class="nested">
          <li><span class="name">Coffee</span></li>
          <li><span>Timeline</span></li>
          <li><span class="caret"><span>Coffee</span></span>
            <ul class="nested">
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
              <li><span class="name">Coffee</span></li>
              <li><span>Timeline</span></li>
            </ul>
          </li>
          <li><span>Timeline</span></li>
        </ul>
      </li>
      <li><span>Timeline</span></li>
    </ul>
  </li>
  <li><span>Timeline</span></li>
</ul>

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

Я хочу создать что-то вроде этого https://vaadin.com/docs/v7/framework/components/components-treetable.html

Мне просто любопытно, как древовидные таблицы обычно реализуются в Интернете.


javascript jquery lit-element treetable
person Tibor Fekete    schedule 19.05.2019    source источник
comment
Мое мнение: если это возможно и вы это сделаете, то потом будете ненавидеть себя за это решение.   -  person connexo    schedule 20.05.2019
comment
Знаете ли вы, как мне решить эту проблему, я не мог найти хороших решений для этого. Я обновлю пост лучшим, что у меня есть, но я тестировал его только без Lit-Element.   -  person Tibor Fekete    schedule 20.05.2019
comment
@TiborFekete Вы можете использовать lit-html с jquery вместо lit-element... вот пример: stackblitz.com/edit/   -  person HakanC    schedule 22.05.2019

Ответы (1)


arrow_upward
1
arrow_downward

Да, но есть некоторые действительно фундаментальные проблемы - jQuery делает некоторые базовые предположения, которые были действительно полезны в 2008 году, но не работают с асинхронной библиотекой, такой как Lit (в частности, о том, когда DOM готов к манипулированию).

Вы поделились примером Vaadin, но все его компоненты все равно используют Lit. Я бы рекомендовал использовать их, а не изобретать заново.

Однако подход Lit отличается от подхода jQuery. С помощью jQuery вы создаете HTML, а затем используете $ для обхода DOM, поиска элементов и подключения событий. С помощью Lit вы создаете HTML из шаблонов и устанавливаете события как, когда добавляете его в DOM (хотя вы можете вернуться к чему-то более похожему на jQuery при повторной гидратации SSR).

Чтобы заставить jQuery работать, вам необходимо:

  • Убедитесь, что jQuery загрузился до того, как компонент загрузится.
  • Используйте firstUpdated, чтобы убедиться, что шаблон отрендерился, прежде чем запускать над ним jQuery.
  • Убедитесь, что вы не заменяете DOM любым последующим изменением Lit (например, используя repeat вместо map).
  • Если вы добавите элементы, вам понадобится jQuery, чтобы найти и настроить их снова.

Было бы значительно перенести этот код на Lit, чем заставить работать jQuery.

Вместо:

<span class="caret"><span>Coffee</span></span>
<ul class="nested">...

А также

document.getElementsByClassName("caret");
...
... .addEventListener("click" ...

У вас есть:


html`
<span class="caret" @click=${this.toggleNode}>Coffee</span>
<ul class=${classMap({active: this.expanded, nested: true})}>...`;
person Keith    schedule 30.04.2021