Как динамически построить jsTree в Jade? - PullRequest
Новая
       7

Как динамически построить jsTree в Jade?

0 голосов
/ 08 октября 2018

Я использую jquery, jstree, jade и nodejs.Моя цель - динамически генерировать дерево, но оно терпит неудачу.

Встроенный код JavaScript работает нормально, но дерево не выводится.Когда я проверяю html, становится ясно, что jade закрывает первый тег ul до того, как он открывает тег li.

Вот код нефрита: 

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 Ответ

0 голосов
/ 08 октября 2018

Вы можете переписать это в нативной Jade итерации , и она будет правильно строить DOM для вас, не говоря уже о том, что намного проще как читать, так и отлаживать.Я также рекомендовал бы использовать более описательные имена переменных в сложных вложенных итерациях, подобных этой. 

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

Было бы проще понять, что именно вы хотите сделать здесь, если вы разместили JSON, который передает шаблон Jade., но вот проблемы, которые я вижу:

Причина, по которой Jade закрывает теги ul перед встраиванием в него li, заключается в том, что вы не отступили в следующей строке, поэтому он будет родственником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++) {
...