如何在Jade中动态构建jsTree？
如何在Jade中动态构建jsTree？
提问于 2018-10-08 23:04:45
我使用的是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。我能把这个交给杰德吗？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-08 23:52:42
您可以用原生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++) {页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52705134
复制相关文章
相似问题