假设我有如下文件
包括/person.jade
.person
.name= name
.desc= desc
现在我想在我的页面上有一个按钮,当点击它时,将前一个注入到文档中。我想要这个,因为我需要向页面添加人员。我该怎么做呢?
在这种情况下我应该只使用 HTML 文件吗?
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")
与前面的示例类似,我使用 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"
);
}