Pug未缓冲的代码变量插值不起作用，但是缓冲的代码可以

Question

我正在尝试使用Pug创建模板的快速应用程序。我无法弄清楚为什么当我使用无缓冲变量插值时，对象是未定义的，但是当我删除破折号时，它似乎工作得很好（减去它实际上是显示对象）

- var campgrounds = '#{camps}'

语法1：

var campgrounds = '#{camps}'

产生：

语法2：

text-center

产生：

Answer 1

我相信您可以：

1. 删除- var campgrounds = '#{camps}'行，并将each campground in campgrounds上的each campground in camps行替换（请参见下面的代码段）。
2. 或者您也可以在- var campgrounds = '#{camps}'上替换- var campgrounds = camps（您不需要在代码行中进行插值）。

$(function() {

    // in your code you get `camps` from DB
    // const camps = await Camp.find();
    const camps = [{name: 'Camp1'}, {name: 'Camp2'}, {name: 'Camp3'}];

    var json = {
        camps: camps
    };

    // jade compile
    // instead of your function res.render(...);
    $("#so").html(jade.compile($("#jadehi").html())(json));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jade/0.27.7/jade.min.js"></script>

<div id="so">SEO(please enable javascript~)</div>
<pre id="jadehi" style="display:none">
.content
  .row
    each campground in camps
      div.col-md-3.col-sm-6
        div.
          Campground: #{campground.name}
          <!-- img(src=`${campground.image}` class='img-thumbnail') -->
          <!-- a(href=`/campgrounds/${campground._id}`) -->
            <!-- h4.caption.text-center #{campground.name} -->

</pre>