ExpressJS：使用 Javascript 将 Include 注入 Jade答案

【问题标题】：ExpressJS: Inject Include into Jade using JavascriptExpressJS：使用 Javascript 将 Include 注入 Jade
【发布时间】：2013-03-15 02:42:00
【问题描述】：

假设我有如下文件

包括/person.jade

.person
  .name= name
  .desc= desc

现在我想在我的页面上有一个按钮，当点击它时，将前一个注入到文档中。我想要这个，因为我需要向页面添加人员。我该怎么做呢？

在这种情况下我应该只使用 HTML 文件吗？

【问题讨论】：

标签： express pug

【解决方案1】：

Jade 在服务器端渲染。因此，您应该使用将返回呈现的 html 的 ajax 调用方法。另一种选择是使用 JavaScript：

function addPerson(name, desc, parentId){
    var container = document.createElement('div');
    container.className = 'person';
    var nameContainer = document.createElement('div');
    nameContainer.className = 'name';
    nameContainer.innerHTML = name;
    container.appendChild(nameContainer);
    var descContainer = document.createElement('div');
    descContainer.className = 'desc';
    descContainer.innerHTML = desc;
    container.appendChild(descContainer);
    var parent = document.getElementById(parentId);
    parent.appendChild(container);
}

玉：

#personContainer
input(onclick="addPerson('#{name}', '#{desc}', 'personContainer');", type="button")

【讨论】：

我喜欢你最初的想法（服务器调用呈现的 html）我会尝试一下。第二个我可能只是生成一个html文件并使用它而不是使用JS来添加indv。 div。
@Jackie 你是对的，使用 JS 时它变得相当大:)

【解决方案2】：

与前面的示例类似，我使用 express 来托管 Jade HTML，以便在其自己的 url 中输入人员输入...

self.app.get('/person/:name/:desc',adddoc.person2);

当然，person2 实现只是 Jade 的渲染。

.person
  mixin personField(desc,name,valuefname,valuelname)

然后在我的 Javascript（使用 JQuery）中

function stump(name, desc){
  $.get(
    "/person/"+desc+"/"+name,
    "{}",
    function(data) {
      var $parents = $( "#parents" );
      $parents.append($(data).filter('.person'));
    },
    "html"
  );
}

【讨论】：