0

我基本上试图完成的是在通过套接字连接获取数据时重用玉部分/模板。非工作示例：

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

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

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

这对于一个简单的列表来说是可以的，但是如果我有更复杂的列表和东西，这可能会很快变得混乱，而且我不得不再次编写纯 HTML，所以我想重新使用我已经存在的翡翠模板以及它们的所有优点太棒了，但还没有运气。

有什么线索吗？

PS：请不要告诉我使用 Ember、Backbone、Derby、Meteor、Angular 或任何其他工具。

提前致谢！

4

2 回答 2

1

您可以使用jade.compile. 然后在客户端 javascript 中包含这些源，包括翡翠runtime.min.js，并在您的客户端代码中参考您的翡翠模板作为正常的 JS 函数。

例如，

服务器.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"));
});

客户端.js

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

内容.jade

h1: Hello #{user}!

索引.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

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

于 2012-08-29T08:01:01.420 回答
0

我们有一个构建步骤，可以将它们编译成类似于 penartur 提到的函数。我不使用扩展或包含（无论如何都不适用于客户端 ATM），但我个人发现我们完全不需要在客户端上使用它，因为 DOM 提供了我们需要的所有分离。

于 2012-08-29T15:22:53.910 回答