express - ExpressJS：Javascriptを使用してインクルードをJadeに挿入

Question

次のようなファイルがあるとしましょう

include / person.jade

.person
  .name= name
  .desc= desc

ここで、クリックすると前のボタンをドキュメントに挿入するボタンをページに配置したいと思います。ページに人を追加する必要があるので、これが必要です。どうすればこれを行うことができますか？

この場合、HTMLファイルを使用する必要がありますか？

Answer 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")

Answer 2

前の例と同様に、私はexpressを使用して、次のような独自のURLで入力された人物のJadeHTMLをホストします...

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"
  );
}