是否可以将 jQuery 与 Lit-element 一起使用？

Question

我想用 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

我只是好奇树表通常在网络上是如何实现的。

Answer 1

是的，但是有一些非常基本的问题 - jQuery 做出了一些基本假设，这些假设在 2008 年非常有用，但被 Lit 之类的异步库打破了（特别是关于何时准备好操作 DOM）。

您分享了一个 Vaadin 示例，但它们的组件都使用 Lit。我建议使用他们的而不是重新发明它。

但是，Lit 方法与 jQuery 不同。使用 jQuery，您可以构建 HTML，然后使用 $ 遍历 DOM、查找元素并连接事件。使用 Lit，您可以从模板构建 HTML，并将事件设置为 as，然后将其添加到 DOM（尽管在为 SSR 补水时，您可能会使用更类似于 jQuery 的东西）。

要使 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})}>...`;