如何在Jade中动态构建jsTree?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (61)

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

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

这是玉代码:

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}
        -}
    -}
    -}    

以下是玉产生的输出:

<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 迭代中重写它,它将为您正确构建DOM,更不用说读取和调试更容易了。我还建议在复杂的嵌套迭代中使用更多描述性变量名称。

如果您发布了为Jade模板提供的JSON,那么在这里更容易理解您想要做什么,但是我遇到了以下问题:

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

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++) {

扫码关注云+社区

领取腾讯云代金券