Nodejs 客户端jade转义的问题

我在模板里写了多行的语法类似这样，希望在客户端js里拿来做ajax回调的数据渲染模板

script(type='tpl/jade')
    |ul
    |    each item in items
    |        li #{item.a}

但是这里由于item in item被作为文本解析，而#{item.a}却仍被视为变量，结果jade就报错了。

试着escape一下，变成 #{item.a}，结果特么原样输出了，我不要反斜杠啊。

所以我目前很蛋疼的做法是用$替换#，然后再$("#tpl").replace(/$/g,"#")这样。弱爆了简直，求指导正确的做法应该怎样。

vueper 1楼•2 个月前

Node.js 客户端 Jade 转义问题

问题描述

在使用 Jade 模板引擎时，你希望在客户端通过 AJAX 回调来获取数据并渲染模板。然而，当你尝试在 Jade 模板中嵌入 JavaScript 逻辑（如循环）时，遇到了一些转义问题。

示例代码

假设你的 Jade 模板文件如下：

script(type='text/tpl' id='my-template')
    ul
        each item in items
            li= item.a

在这个例子中，each item in items 会被正确地当作 Jade 的控制结构处理，而 item.a 会被当作变量进行插值。

解决方案

确保正确使用 Jade 语法：
- 使用 = 来表示插值，而不是 #{}。
- 确保 Jade 控制结构（如 each 循环）正确缩进。
在客户端使用渲染函数：
- 在客户端，你可以将 Jade 模板字符串传递给 Jade 的编译函数，然后将结果插入到 DOM 中。

以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Jade Client-Side Example</title>
    <script src="https://unpkg.com/jade@1.11.0/runtime.js"></script>
</head>
<body>
    <div id="content"></div>

    <script type="text/tpl" id="my-template">
        ul
            each item in items
                li= item.a
    </script>

    <script>
        // 获取 Jade 模板字符串
        const template = document.querySelector('#my-template').textContent;

        // 示例数据
        const data = {
            items: [
                { a: 'Item 1' },
                { a: 'Item 2' }
            ]
        };

        // 编译并渲染模板
        const compiled = jade.compile(template);
        const rendered = compiled(data);

        // 将渲染后的 HTML 插入到页面中
        document.getElementById('content').innerHTML = rendered;
    </script>
</body>
</html>

解释

Jade 语法：使用 = 而不是 #{} 进行插值，确保 Jade 控制结构（如 each 循环）正确缩进。
编译和渲染：在客户端，使用 jade.compile 函数将模板字符串编译为函数，然后将数据传递给该函数以生成最终的 HTML 字符串，并将其插入到页面中。

通过这种方式，你可以避免手动替换字符或使用其他不优雅的方法，从而更简洁地实现客户端 Jade 模板的渲染。

phonegap100 2楼•2 个月前

推荐使用ejs把，以前我也写jade，写2天我就写烦了，因为我们是独立开发，别人拿静态页面给我，然后我去写jade模版，那简直是要疯了。每种模版引擎都提供了转义，jade也不例外，不过语法忘记了，可以去查阅api：http://naltatis.github.com/jade-syntax-docs/

sinazl 3楼•2 个月前

嗯，因为是做内部用的工具，所有东西都在自己手上，所以才敢尝尝鲜。jade官方文档里的几处escape都不满足我的需求，严重怀疑是他们实现上的bug，准备去提个issue试试。多谢分享链接。

sinazl 4楼•2 个月前

模板服务可以有，就是纯静态的内容不必要多个ajax请求还要去管理数据和模板的并行加载串行实行什么的啊。emberjs看起来根mustache挺像，果然客户端还是tag派比缩进派舒适么，其实就是不想搞两套增加后来同学的学习维护成本……

sinazl 5楼•2 个月前

已经修复了哈哈 https://github.com/visionmedia/jade/issues/769

h691938207 6楼•2 个月前

在Node.js中使用Jade（现称为Pug）模板引擎时，处理客户端模板和AJAX回调数据渲染可能会遇到一些问题。你遇到的问题主要是由于Jade模板引擎对变量插值和文本的处理方式导致的。

正确做法

确保在客户端正确解析Jade模板：
- 使用npm install pug-client来安装Pug的客户端版本。
- 在客户端加载Pug编译器。
处理模板字符串：
- 确保模板字符串在客户端正确解析为HTML。

示例代码

<!-- 引入Pug客户端编译器 -->
<script src="https://cdn.jsdelivr.net/npm/pug@3.0.0/runtime.min.js"></script>

<!-- 定义一个包含Jade模板的script标签 -->
<script type="text/tpl" id="template">
    ul
        each item in items
            li= item.a
</script>

<!-- 定义一个容器用于渲染 -->
<div id="container"></div>

<script>
// 获取模板字符串
const template = document.querySelector('#template').textContent;

// 定义数据
const data = {
    items: [
        { a: 'Item 1' },
        { a: 'Item 2' }
    ]
};

// 使用Pug编译模板并渲染到容器中
const compiledFunction = pug.compile(template);
document.getElementById('container').innerHTML = compiledFunction(data);
</script>

解释

引入Pug客户端编译器：通过<script>标签引入Pug的客户端编译器。
定义模板字符串：使用<script type="text/tpl">标签定义一个包含Jade模板的脚本。
定义数据：准备需要渲染的数据对象。
编译和渲染：使用pug.compile方法编译模板字符串，并将结果渲染到指定的DOM元素中。

注意事项

确保模板中的变量插值使用= item.a而不是#{item.a}，因为后者会被视为文本而不是变量。
使用Pug的客户端编译器可以避免服务器端渲染，直接在浏览器中完成模板的编译和渲染。

这种方法可以有效地解决你在客户端渲染Jade模板时遇到的问题。