【问题标题】：How to insert Jade markup into a DOM element in the browser如何在浏览器中将 Jade 标记插入到 DOM 元素中
【发布时间】：2014-11-09 07:49:50
【问题描述】：

我正在尝试设计一个网页，单击按钮会将一些按钮添加到div。如果我使用原始的html，那么在jquery 的帮助下，我将使用以下代码段来完成我的工作。

$('#div-id').html('')

但我使用Jade 作为模板引擎。所以我需要为按钮点击动态插入 Jade 块。我在网上找不到任何这样的例子。我可以做吗？如果是，那么如何？

【问题讨论】：

【解决方案1】：

您可以使用 Ajax 从服务器检索已编译的 html：

$.get("/path/to/partial_view/").done(function(response) {
  $("#div-id").html(response.data);
});

/path/to/partial_view 应该是你的jade的视图，并返回引擎编译的html

【讨论】：

【解决方案2】：

解决方案取决于您是在浏览器中还是在服务器上编译 Jade。 Documentation.

客户端 - Demo

<script src="//cdnjs.cloudflare.com/ajax/libs/jade/1.3.1/jade.min.js"></script>

$.get('foo.jade').then(function(doc) {
  var html = jade.compile(doc)();
  $(myElem).append(html);
});

服务器端

在服务器上设置路由，像往常一样编译jade并提供服务。

// setup route
app.get('/templates/foo', function(req, res) {
  // render foo.jade as html
  res.render('foo');
});

然后，使用浏览器中的 ajax 来检索编译后的模板：

$.get('/templates/foo').then(function(html) {
  $(myElem).append(html);
});

【讨论】：