Nodejs中jade模板使用handlerbar，如何写

Nodejs中jade模板使用handlerbar，如何写

在个人理解，jade模板完成的类似与java里的jsp工作，现在我想分页之后，通过handlerbar将ajax的返回内容进行渲染，那我该如何在jade模板中输入handlerbar的script呢？还有能不能只用jade模板实现。 script(id=“table-template” type=“text/x-handlebars-template”) {{#each info}} {{…/name}}的{{this}}<br> {{/each}} 当然以上书写，在jade模板中是报错的。

4 回复

在Node.js项目中，如果你希望结合Jade（现在称为Pug）模板引擎和Handlebars模板引擎来处理页面渲染，尤其是用于AJAX请求后的数据渲染，你需要先了解两者的基本使用方法，并考虑如何在Jade/Pug模板中正确嵌入Handlebars脚本。

1. 为什么选择这种方式？

  • 灵活性：使用Handlebars可以让你更灵活地处理复杂的逻辑和条件渲染。
  • 分离关注点：你可以保持HTML结构在Jade/Pug模板中，而将复杂的模板逻辑放在Handlebars中。

2. 如何在Jade/Pug模板中嵌入Handlebars脚本？

首先，你需要确保你的服务器端能够正确处理这两种模板引擎。通常情况下，你只能选择一个模板引擎作为默认的渲染引擎。因此，一种常见的方式是直接在Jade/Pug模板文件中嵌入Handlebars模板脚本。

示例代码

// 使用pug模板语言
doctype html
html
  head
    title Example Page
  body
    h1 User List
    script(id="table-template" type="text/x-handlebars-template")
      {{#each info}}
        {{@index}}: {{this.name}}<br>
      {{/each}}
    
    // 引入handlebars库
    script(src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js")
    
    // AJAX请求后，渲染数据
    script.
      const source = document.getElementById('table-template').innerHTML;
      const template = Handlebars.compile(source);
      const data = {"info": [{"name": "Alice"}, {"name": "Bob"}]};
      const rendered = template(data);
      document.getElementById('content').innerHTML = rendered;

    div#content

3. 解释

  • 在上述示例中，我们创建了一个id为table-template的script标签，其中包含了Handlebars模板。
  • 当AJAX请求成功后，我们从DOM中获取这个模板，并使用Handlebars编译它。
  • 然后，我们将实际的数据传递给这个模板，并将渲染的结果插入到id为content的div中。

这种方法允许你在Jade/Pug模板中嵌入Handlebars模板，同时保持HTML结构的简洁性。需要注意的是，这可能需要一些额外的JavaScript代码来处理模板的编译和渲染。


|

按照我对lz的问题的理解。我觉得可以使用express解决这个问题。express中使用jade模板。 然后在后台将你要返回给client的对象（例如：你问题中的info）挂在res.locals下就好。

在Node.js项目中，Jade模板引擎现在已经更名为Pug，而Handlebars是一种强大的JavaScript模板引擎。如果你想在Jade（或Pug）模板中嵌入Handlebars脚本，并通过AJAX返回的数据进行渲染，你可以直接在Jade（Pug）模板中插入Handlebars模板。但是需要注意的是，直接在Jade（Pug）中编写Handlebars模板可能会导致解析错误，因为Jade（Pug）和Handlebars都有各自的语法。

以下是如何在Jade（Pug）模板中正确地插入Handlebars模板，并通过AJAX返回的数据进行渲染的一个示例：

  1. 首先，确保安装了pug和handlebars模块：
npm install pug handlebars
  1. 创建一个Jade（Pug）模板文件，比如index.pug：
doctype html
html
  head
    title Handlebars with Pug Example
  body
    script(src='/path/to/handlebars.min.js')
    script#table-template(type='text/x-handlebars-template')
      {{#each info}}
        {{@key}}的{{this}}<br>
      {{/each}}
    script.
      var source = document.getElementById('table-template').innerHTML;
      var template = Handlebars.compile(source);
      var data = {info: {"name": "John", "age": 30}};
      document.body.innerHTML += template(data);

注意：在上面的代码中，我们使用了Pug模板语法来创建HTML结构，并且插入了一个ID为table-template的<script>标签，其中包含了Handlebars模板。

  1. 使用Express框架创建服务器端路由：
const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000, () => console.log('Server running on port 3000'));
  1. 运行你的Node.js应用并访问http://localhost:3000，你应该能看到页面上渲染出的内容。

在这个例子中，我们并没有使用AJAX获取数据，而是直接在服务器端渲染了模板。如果你希望从服务器端获取数据并渲染，可以使用AJAX请求服务器上的API接口，然后在客户端使用Handlebars模板编译和渲染数据。

回到顶部