gpt4 book ai didi

javascript - 如何动态地在 Jade 中构建一个 jsTree?

转载 作者:行者123 更新时间:2023-11-30 20:07:44 25 4
gpt4 key购买 nike

我正在使用 jquery、jstree、jade 和 nodejs。我的目标是动态生成一棵树,但它失败了。

内联 javascript 代码工作正常,但没有树输出。当我检查 html 时,很明显 jade 在打开 li 标签之前关闭了第一个 ul 标签。

这是 Jade 代码:

doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js')
script.
$(document).ready(function() {
$('#selTree').jstree(ghcomp);
});
body
#selTree
ul
-for(let r=1; r<ghcomp.length; r++) {
-for(let gh in ghcomp[r]) {
li #{gh}
ul
-for(let c=0; c<ghcomp[r][gh].length; c++) {
li #{ghcomp[r][gh][c].comp}
-}
-}
-}

这里是 jade 产生的输出:

<div id="selTree"><ul></ul><li>I<ul></ul><li>B</li></li><li>L<ul></ul><li>1</li><li>2</li></li><li>M<ul></ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>e</li></li><li>Production<ul></ul><li>virtual</li></li><li>Tech<ul></ul><li>na</li></li><li>Themato<ul></ul><li>C1</li><li>C2</li><li>C3</li><li>C4</li><li>C5</li><li>C6</li><li>C7</li><li>C8</li></li></div>

我怎样才能控制这里的生产过程?

例如:我可以轻松地即时生成 HTML。我可以把它交给 Jade 吗?

谢谢。

最佳答案

你可以用原生 Jade 重写 iteration它将为您正确构建 DOM,更不用说阅读和调试都更容易了。我还建议在像这样的复杂嵌套迭代中使用更具描述性的变量名称。

ul
each gh, ghIndex in ghcomp
li= gh
ul
each c in gh
li= c

如果您发布提供给 Jade 模板的 JSON,将更容易准确地理解您想在这里做什么,但这是我看到的问题:

Jade 在将 li 嵌入其中之前关闭 ul 标签的原因是您没有缩进下一行,因此它将是 ul 的同级而不是子级:

ul
-for(let r=1; r<ghcomp.length; r++) {

ul
-for(let c=0; c<ghcomp[r][gh].length; c++) {

这些应该更改为(如果您坚持使用此方法):

ul
-for(let r=1; r<ghcomp.length; r++) {

ul
-for(let c=0; c<ghcomp[r][gh].length; c++) {

关于javascript - 如何动态地在 Jade 中构建一个 jsTree?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52705134/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com