玉/哈巴狗没有检测到javascript变量？

Question

因此，在单击章节链接后，它会在控制台中显示使用ajax get调用将数据作为数组加载到commentList变量中。并且jade应该循环遍历数组并显示它。但是当我去检查元素时，它显示一个空的p元素。为什么？如果我删除if语句并且只是使用每个循环，则表示commentList未定义。

这是我的js文件：

var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
    radius = '20em', //distance from center
    start = -90, //shift start from 0
    $elements = $('li:not(:first-child)'),
    numberOfElements = (type === 1) ?  $elements.length : $elements.length - 1, //adj for even distro of elements when not full circle
    slice = 360 * type / numberOfElements;

$elements.each(function(i) {
    var $self = $(this),
        rotate = slice * i + start,
        rotateReverse = rotate * -1;

    $self.css({
    'transform': 'rotate(' + rotate + 'deg)' + 
                 ' translate(' + radius + ')' +
                 ' rotate(' + rotateReverse + 'deg)' + 
                 ' translate(-50%, -50%)'
});


});



/* $('.fade').on('click', function() {
   $('.centered li').each(function(i){
        $(this).delay(500 * i).fadeIn(1500)

      })
  }) */

$('.centered li:not(:first-child').each(function(i){


        $(this).delay(500 * i).fadeIn(1500)

      })

$('#userRole').click(function(){
    if($('#userRole').is(':checked')){
        $('#passCode').show();
    }else {
        $('#passCode').hide();
    };    
 });


/*
function getChapterLinks(chapterId) {

   var datta;

    $.ajax({
      url: chapterId
    }).done(function(data) {
      console.log(data);
   datta = data;

    });
    console.log(datta)
return datta
}

*/
var datta;
var link;
var toglink;
var commentList;
var commentChap;
$( "a#chapterLinks1" ).click(function(e) {
  e.preventDefault();
  link = $(this).attr('href');
  //console.log(link);
 /* var datta = $.ajax({
      url: link

    })
  //console.log(datta)
  dik = datta;

*/
  toglink = link.replace('/chapterLinks', '/checktoggle')
  $.get(toglink, function(data){

      datta = data;

  })

  $.get(link, function(data){
    commentList = data.commentList;
    commentChap = data.chapter[0]._id;
    console.log('hi chapid' + data.chapter[0]._id)
    console.log(commentList);
    console.log(commentChap);


  })



/*
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.font = "30px Arial";
   ctx.fillText(data.chapter[0].chapterStory,10,50);
*/
});


 $('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  $.get(link, function(data){

       //var story = data.chapter[0].chapterStory;
       console.log(data)
       console.log(commentList)
       modal.find('.modal-title').text(data.chapter[0].chapterTitle.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
       modal.find('.modal-body').text(data.chapter[0].chapterStory.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
       $('#chapid').val(data.chapter[0]._id);


       if(datta.togg == true){
         document.getElementById("toggle-heart").checked = true;
       }else{
        document.getElementById("toggle-heart").checked = false;
       }

      //$('body').append(data);
  })

})


  $("#likeform").on("change", "input:checkbox", function(e){
    //e.preventDefault();
   /* var datta;
    $.get(link, function(data){

          //console.log(data);  
          datta = data;
          console.log(datta);
      }) */


    var formdata = $('#likeform').serialize();
    console.log(formdata);
      $.ajax({
        type: 'POST',
        url: '/uplikes',
        data: formdata,
        success:function(data, textStatus, jqXHR){



            if(datta.user == null){
              //$("body").html(data);
              document.location.href = '/login';
              console.log(data)
            }
            else{
            console.log(data);
          }
        },
        error:function(jqXHR, textStatus, errorThrown){

          console.log(errorThrown);
        }

      })

    })


    $('#comForm').on("submit", function(e){
      e.preventDefault();
      var formdata = $(this).closest('form').serialize();  
      $.ajax({
        type: 'POST',
        url:'/add-comment',
        data: formdata,
        success: function(data, textStatus, jqXHR){
            console.log(data);
            commentList = data.commentList;
            console.log(commentList);
        },
        error:function(jqXHR, textStatus, errorThrown){

          console.log(errorThrown);
        }


      })


    })

这是我的玉文件：

  doctype html
  html
  head

  body(style='background-color:black')





  p 
   each chapter in chapters
    ul.centered
      li.none
      li 

       a#chapterLinks1(href='/chapterLinks/'+chapter._id, data-toggle='modal', data-target='#myModal') Chapter #{chapter.chapterNumber} 
        br
        img.center(src='/images/chapter' + chapter.chapterNumber + '.jpg',  height='70', width='70')






   div.menuchapters 
    if (!user) 
        a(href='/main', style='text-decoration:none;color:gray;') Back to Main
        br
        a(href='/login', style='text-decoration:none;color:gray;') Login
        br
        a(href='/register', style='text-decoration:none;color:gray;') Register
        br

    if (user)
        a Welcome #{user.name}
        br
        a(href='/main', style='text-decoration:none;color:gray;') Back to Main
        br
        a(href='/chapters' , style='text-decoration:none;color:gray;') Add Chapters
        br
        a(href='/profile', style='text-decoration:none;color:gray;') Profile
        br
        a(href='/logout', style='text-decoration:none;color:gray;') Logout


// Modal
#myModal.modal.custom.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel')
  .modal-dialog(role='document')
    .model-content
      .modal-header
        h4#myModalLabel.modal-title 
      .modal-body
        h4#myModalLabel.modal-body 
      .modal-footer
        form.like-icon(role='form', action='/uplikes', method='post', id='likeform')
            input(type='hidden', name='by', id='inpurUserId', value=user ? user.id: '' placeholder='user', autofocus)
            input(type='hidden', name='chapterId', id='chapid', placeholder='user', autofocus)
            input#toggle-heart(type='checkbox')
            label(for='toggle-heart') ❤

        div#messages
          if commentList                                    
            each comment in commentList
                div.comment__item
                    div.infos
                        img(src= '../' +comment.by.profile_pic)
                    div.content
                        h3.comment__authorname #{comment.by.name}
                        b.comment__time #{moment(comment.createdAt, "YYYYMMDD").fromNow()}
                        p #{comment.body}
          else
            p #{commentList}
        form(role='form', action='/add-comment', method='post', id='comForm')
                textarea(name='body', cols='30', rows='5', form="comForm", placeholder="Enter comment")
                br
                input(type='text', name='chapterId', id='inpurUserId', value='5a0f1e266b34a0212ccc0e5c', placeholder='chapter', hidden, autofocus)
                br
                input(type='text', name='by', id='inpurUserId', value=user ? user.id: '' placeholder='user', hidden, autofocus)
                button(type='submit') Add Comment




    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js')

      link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet")

  script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js")
  link(rel='stylesheet', href='/stylesheets/style.css')
  script(src='/javascripts/index.js')       

Answer 1

请注意 Jade / Pug在服务器上运行并创建用于渲染的html 。这个渲染的html也可以包含css或js，但这是主要的想法。

当您调用方法来渲染/编译它时，Jade / Pug可以使用服务器上可用的变量。一旦创建了html响应，就完成了它的工作。

现在你有一个html文件（可能包含js / jquery文件），它将在你的浏览器中显示，你的JS / jQuery脚本将在浏览器上运行。当你在浏览器方面时，Jade现在什么都不做。