javascript - 如何将 Jade 标记插入到浏览器中的 DOM 元素中

Question

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

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

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

Answer 1

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

客户端 - Demo

包括 Jade

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