如何将数据库中的数据注入玉模板？

Question

我正在尝试将数据从 mongodb 导入 jade 模板，以便在图表中显示它们。我正在使用 chart.js 内联脚本，以便在图形上呈现数据。所以来自 Mongodb 的数据在页面上，我可以这样访问它：

each city in cities
    p #{city.name}

这是我将数据传递到页面的方式：

exports.index = function(req,res){
    var cities = City.find({}).limit(20);
    cities.exec(function(err,doc) {
        res.render("index",{cities:doc});
    });
};

我使用 php 创建了相同的应用程序，只需将数据传递到页面并将数据注入 javascript 图形（使用 json_encode）

Here is final result with php:

这很容易，因为 php 数据对于 HTML 页面来说是全局的。如何用 Jade 做到这一点？

谢谢

Answer 1

啊，所以您的目标是既使用城市数据在服务器上生成 HTML，又使其在浏览器中作为原始 javascript 对象数据可用。为此，您将其格式化为 JSON 并将其填充到 <script> 标记中。有一些模块可以帮助解决这个问题，例如sharify， 但是你的玉模板中的基本想法是这样的：

在您的快速路由处理程序 javascript 中：

exports.index = function(req,res){
    var cities = City.find({}).limit(20);
    cities.exec(function(err,doc) {
        //There are tricky rules about safely embedding JSON within HTML
        //see http://stackoverflow.com/a/4180424/266795
        var encodedCityData = 'window.cities = ' + JSON.stringify(cities)
            .replace(/</g, '\\u003c')
            .replace(/-->/g, '--\\>');
        res.render("index",{cities:doc, encodedCityData: encodedCityData});
    });
};

在你的翡翠模板中：

script!= encodedCityData

在浏览器中，您可以通过设置在window 对象上的cities 变量访问数据。