Handlebars.js 如何与 jQuery 和 Nodejs Express 一起工作？答案

【问题标题】：How does Handlebars.js work with jQuery and Nodejs Express?Handlebars.js 如何与 jQuery 和 Nodejs Express 一起工作？
【发布时间】：2014-07-31 11:46:48
【问题描述】：

我正在尝试使用 Express JS 和 Handlebars 创建一个基本网站。我有两个文件，page1Router.js 和 page1Router.handlebars。在 Handlebars 文件中，我有这个：

<!DOCTYPE html>

<html lang="en">

    <head>
        <title>Page 1</title>
    </head>

    <script id="page1_template" type="text/x-handlebars-template">
        <body>
            {{#data.info}}
            <h1>{{reportMessage 1}}</h1> <br>
            {{/data.info}}
            <a href="http://localhost:3030/anotherpage">Click here to go to another page.</a>
        </body>
    </script>

</html>

在我的 JS 文件中：

var config = require("../config/config").config,
   express = require("express"),
    router = express.Router(),
    logger = require("../logger/logger").logger,
     jsdom = require("jsdom"),
         $ = require('jquery')(jsdom.jsdom().createWindow()),
Handlebars = require('handlebars'),
    source = $("#page1_template").html(),
  template = Handlebars.compile(source);

router.get('/page1', homepage);

var data = {
    info: [
        {message:"Hey this is a message"},
        {message:"This is a different message"},
        {message:"This is a final message"}
    ]
};

Handlebars.registerHelper('reportMessage', function(mes) {
    if (mes == 1) {
        return info[0].message;
    } else if (mes == 2) {
        return info[1].message;
    }

    return "This is an error message";
});

function homepage(req, res) {
    res.render(__dirname + "/page1Router.handlebars", data);

    logger.info(config.Message1);
}

$('body').append(template(data));

module.exports = router;

当我尝试使用“node app”运行服务器时，出现以下错误：

/Users/iantait/BroboticsForever/practice/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:436
    throw new Exception("You must pass a string or Handlebars AST to Handlebar
      ^
Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined
    at new Error (<anonymous>)
    at Error.Exception (/Users/iantait/BroboticsForever/practice/node_modules/handlebars/dist/cjs/handlebars/exception.js:13:41)
    at compile (/Users/iantait/BroboticsForever/practice/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:436:11)
    at HandlebarsEnvironment.hb.compile (/Users/iantait/BroboticsForever/practice/node_modules/handlebars/dist/cjs/handlebars.js:19:12)
    at Object.<anonymous> (/Users/iantait/BroboticsForever/practice/routers/page1Router.js:9:27)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

我的问题是：jquery 如何知道在哪里寻找“page1_template”？我相信这个错误正在发生，因为 jquery 没有正确找到“page1_template”脚本，但我不知道为什么。有什么建议吗？？

【问题讨论】：

标签： jquery express handlebars.js

【解决方案1】：

您似乎混淆了服务器端和客户端逻辑，这导致了一些问题。

最大的问题是你调用这条线：

source = $("#page1_template").html()

在您实际呈现页面之前（实际上，您在 Web 应用程序启动时调用它）而不是在页面呈现之后。那时您的程序没有元素 #page1_template 可访问，因此 source 可能会为 null 或未定义。

所以要回答您的问题，“jquery 如何知道在哪里查找“page1_template”？”，它不知道，也无法访问它。

另一个合乎逻辑的问题是您在homepage 请求处理程序之外调用$('body').append(template(data)); ，这将不起作用。为了让它有任何工作的机会，您至少必须将它放在请求处理程序中。

我对 jsdom 了解不多，但据我所知，我认为这不是您正在寻找的解决方案。无需在服务器端代码中使用它或 jQuery。您的服务器逻辑应该能够在不需要使用 jQuery 的情况下呈现完整的页面。

你有几个选项，所有这些选项都会从服务器中杀死 jsdom 和 jQuery。

在服务器上呈现完整页面，并在您的homepage 请求处理程序中返回带有res.render 的结果（首选）。
只需发送文件的静态部分，发出 AJAX 请求并使用客户端 Handlebars 脚本更新您的页面。
切换到 express 的首选模板语言 Jade，除了没有额外的开销之外，它就像 #1 一样。
还有很多，我就不一一列举了。

由于您似乎喜欢使用 Handlebars，所以我将回答 #1。同样，您的问题的症结在于 Handlebars.compile(source) 行失败，因为 source 不是字符串，因为您试图使用 jQuery 从您的 jsdom 实例中获取模板（该模板早在您的页面之前就已生成）渲染。请记住，我们正在编写的这段 JS 代码存在于服务器上，而不是浏览器中！）。

第 1 步：获取正确的软件包

摆脱 jsdom、jQuery 和 Handlebars，下载 'express3-handlebars'（它也适用于 express 4）。

第 2 步：配置 express

这是您的快递应用应该是什么样子的基本外观。请特别注意我如何配置视图引擎，以便它知道如何处理 .handlebars 文件。

// Get the dependencies we need
var express = require('express'),
    expressHbs = require('express3-handlebars');

// Create a new express app
var app = express();

// Tell express where our base directory is (for static files)
// usually, we do __dirname + '/public', so we have a public folder for public content
app.use(express.static(__dirname)); 

// Configure a view engine for express, so it knows how to render .handlebars files
// I set the default layout to be main.handlebars
app.engine('handlebars', expressHbs({ defaultLayout: 'main', extname: '.handlebars' }));
app.set('view engine', 'handlebars');

// Set up your route
app.get('/page1', homepage);

// Set up a request handler
function homepage(req, res) {
    res.render('page1'); // We'll come back to this in a minute.
}

// Start listening
app.listen(8080);

第 3 步：在正确的位置获取正确的文件

express3-handlebars 在特定位置查找视图文件。它假定您有一个views/ 目录，其中有一个用于布局的views/layouts 文件夹。

由于我们将 express 配置为使用 main.handlebars 作为我们的模板，这就是我们的“主布局”。它将被用于每个页面，并且布局引擎会将{{{body}}} 替换为您的页面特定信息。

视图/布局/main.handlebars：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{{title}}</title>
    </head>
    <body>
        {{{body}}}
    </body>
</html>

同样，express3-handlebars 开始在 views 文件夹中查找视图。无论您想要在页面中包含什么内容，都将在此处插入，并将插入到{{{body}}}。为简单起见，我没有使用您的 Handlebars 助手，但您当然可以这样做（阅读文档以获取更多信息）。但是，您确实应该尝试将逻辑保留在您的服务器代码和模板之外。

views/page1.handlebars：

<h1>{{message}}</h1>
<a href="http://localhost:3030/anotherpage">Click here to go to another page.</a>

第 4 步：将所有内容捆绑在一起

最后，我们只需将一些数据发送到您的视图，以便它正确呈现。让我们从上面更新homepage 请求处理程序：

// Set up a request handler
function homepage(req, res) {
    // Ideally, here is where you would determine what message to send down
    var context = {
        title: 'Page 1',
        message: 'This is a message'
    };
    // Render the view in views/page1.handlebars with this data
    res.render('page1', context); 
}

应该就是这样！现在，我们在将其发送到客户端之前渲染了一个完整的 HTML 页面，无需使用 jQuery 或 JIT 编译 Handlebars 模板。

以下是一些相关文档：

【讨论】：

这非常有帮助，感谢您抽出时间给我这么详细的答案！