从 Jade 访问 javascript 库答案

【问题标题】：Accessing javascript libraries from Jade从 Jade 访问 javascript 库
【发布时间】：2015-03-27 13:13:59
【问题描述】：

我正在编写一个小型 nodejs 应用程序来从 couchdb 中获取内容并计划使用 vis.js 将其可视化在这个过程中，我了解了express、jade并使用了它们。但是现在我意识到必须从玉模板中调用 vis.js。所以我在我的玉文件中添加了以下内容

doctype html
html(lang="en")
head
title= title
link(rel="stylesheet", href="css/bootstrap.css", type="text/css")
link(rel="stylesheet", href="css/main.css", type="text/css")
body(style="background-image:url(/images/background.jpg)")

div(class="container", id="visualization")
script.
var options = {};
var data = new vis.DataSet(options);
var container = document.getElementById('visualization');
new vis.Timeline(container, data, options);

这样做有意义吗？我遇到了与缩进和空格相关的错误（如玉的典型）。谢谢！

【问题讨论】：

那是因为翡翠实际上要求你缩进。
是的，我明白了。第 10 行前有 2 个空格，第 11、12、13、14 行各有 1 个制表符
@user1384205 Jade 希望每个文件的缩进保持一致。您必须选择空格（以及多少）或制表符，然后在整个视图中使用该选项。

标签： javascript node.js express pug vis.js

【解决方案1】：

是的，问题是你的缩进。这应该是正确的：

doctype html
html(lang="en")
    head
        title= title
        link(rel="stylesheet", href="css/bootstrap.css", type="text/css")
        link(rel="stylesheet", href="css/main.css", type="text/css")
    body(style="background-image:url(/images/background.jpg)")

        div(class="container", id="visualization")
        script.
            var options = {};
            var data = new vis.DataSet(options);
            var container = document.getElementById('visualization');
            new vis.Timeline(container, data, options);

您还可以将div(class="container", id="visualization") 简化为#visualization.container

【讨论】：

第 10 行前有 2 个空格，第 11、12、13、14 行各有一个制表符空格。我还在第 10 行（脚本）上尝试了 1 个制表符空间，并在其下方的每一行（第 11、12、13、14 行）尝试了 2 个制表符空间。这是错误 8| 9| div(class="容器", id="可视化") > 10|脚本。 11|变种选项 = {}; 12| var data = new vis.DataSet(options); 13| var container = document.getElementById('visualization');缩进无效，您可以使用制表符或空格，但不能同时使用

【解决方案2】：

确保在你的模板中加载vis的css和js文件，然后你就可以通过node从数据库中获取数据并发送到视图中使用。

app.get('/therout', function(req, res) {
    var dbdata;
    // get the data from the database 
    res.render('viewname', { dbdata: dbdata})
}

在模板中

data = new vis.DataSet(dbdata);

【讨论】：

是的。我正是这样做的。 response.render('timeline.jade', data) 似乎也可以。

【解决方案3】：

Jade 似乎希望所有元素都按空格或制表符对齐，但不能同时按两者对齐。一旦我将所有线条更改为按空间对齐，它就起作用了。谢谢大家。

【讨论】：