可以将jQuery与Lit-element一起使用吗?

时间:2019-05-19 22:07:54

标签: javascript jquery treetable lit-element

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

我很好奇树形表通常如何在网络上实现。

1 个答案:

答案 0 :(得分:1)

是的,但确实存在一些非常基本的问题 - jQuery 做出了一些基本假设,这些假设在 2008 年非常有用,但被像 Lit 这样的异步库破坏了(特别是关于 DOM 何时准备好进行操作)。

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

然而,Lit 方法与 jQuery 不同。使用 jQuery,您可以构建 HTML,然后使用 $ 遍历 DOM、查找元素并连接事件。使用 Lit,您可以从模板构建 HTML 并将事件设置为,然后将其添加到 DOM(尽管在重新组合 SSR 时您可能会回退更类似于 jQuery 的东西)。

要使 jQuery 工作,您需要:

  • 确保 jQuery 在组件加载之前加载
  • 使用 firstUpdated 确保模板在运行 jQuery 之前已经呈现
  • 确保您用任何后续 Lit 更改替换 DOM(例如使用 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})}>...`;