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

Question

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

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

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

Answer 1

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

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

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

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