Question

我基本上尝试完成的是在通过套接字连接获取数据时重用jade partials / templates。非工作示例：

socket.on('company_created', function(company) {
  var html = include _company;
  $('#companies ul').append(html);
});

通常我必须创建一个新的li并像这样设置内容（这是按预期工作）：

$('#companies ul').append($('<li>').text(company.name));

这对于一个简单的列表是可以的，但是如果我有更复杂的列表和内容，这可能会很快变得混乱，而且我不得不再次编写纯HTML，所以我想重新使用我已经存在的jade模板善良会很棒，但还没好运。

有任何线索吗？

PS：请不要告诉我使用Ember，Backbone，Derby，Meteor，Angular或任何其他内容。

提前致谢！

Answer 1

您可以使用jade.compile将您的jade源代码编译为JS。然后在客户端javascript中包含这些源代码，包括jade的runtime.min.js，并在客户端代码中引用jade模板以了解正常的JS函数。

例如，

<强> server.js

app.get('/templates/:template.js', function (req, res) {
    var template = req.params.template;
    response.end([
        "window.templates = window.templates || {};",
        "window.templates[\"" + template + "\"] = " + jade.compile(template + ".jade", { client: true; });
    ].join("\r\n"));
});

<强> client.js

$(function() { $("#placeholder").html(window.templates["content"]({user: "Daniel" })); });

<强> content.jade

h1: Hello #{user}!

<强> index.jade

!!!
html
    head
        script(src='/lib/jquery/jquery.js')
        script(src='/lib/jade/runtime.min.js')
        script(src='/templates/content.js')
        script(src='/scripts/client.js')
    body
        #placeholder

请注意，上面的代码可能在语法上不正确，仅用于说明这个想法。

Answer 2

我们有一个构建步骤，将它们编译为类似penartur提到的函数。我不使用extend或include（它无论如何都不能在客户端ATM上工作），但我个人认为我们完全不需要在客户端上，因为DOM提供了我们需要的所有分离。

在jade模板中获取`include`的返回值

2 个答案: