是否可以將 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、查找元素並連接事件。 隨着點亮你建立從模板的HTML並設置事件，你把它添加到DOM（盡管你可能在補水時SSR回落更類似於jQuery的東西）。

要使 jQuery 工作，您需要：

• 確保 jQuery 在組件加載之前加載
• 使用firstUpdated確保模板在運行 jQuery 之前已經呈現
• 確保您不使用任何后續 Lit 更改替換 DOM（例如使用repeat而不是map ）
• 如果確實添加了元素，則需要 jQuery 來查找和重新設置它們。

這將是端口相當容易這段代碼點着，使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})}>...`;