从Jade访问javascript库

我正在编写一个小的nodejs应用程序，从couchdb中提取内容，并计划使用 在这个过程中，我学习了express和jade，并利用了它们。 但是现在我意识到必须从jade模板调用vis.js。所以我在我的jade文件中添加了以下内容

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);

这样做有意义吗？我有一些与缩进和空格相关的错误（就像jade的典型错误一样）。

---

谢谢

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

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

确保在模板中加载vis的css和js文件，然后您可以通过节点从数据库获取数据，并将其发送到视图并使用它

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

在模板中

data = new vis.DataSet(dbdata);

---

看起来Jade希望所有元素要么按空格对齐，要么按制表符对齐，但不能同时按空格和制表符对齐。一旦我把所有的线都改成按空间对齐，它就起作用了。谢谢大家。

那是因为jade实际上要求你们缩进。是的，我明白。第10行前有2个空格，第11、12、13行各有一个制表符空格，14@user1384205Jade希望每个文件的缩进保持一致。您必须选择空格（以及空格的数量）或制表符，然后在整个视图中使用该选项。第10行前有2个空格，第11、12、13、14行各有一个制表符空格。我还在第10行（脚本）上尝试了1个制表符空间，并在下面的每行（第11、12、13、14行）尝试了2个制表符空间。下面是错误8 | 9 | div（class=“container”，id=“visualization”）>10 |脚本。11 | var选项={}；12 | var数据=新的可视数据集（选项）；13 | var container=document.getElementById（'visualization'）；缩进无效，可以使用制表符或空格，但不能同时使用。我确实做到了。response.render（'timeline.jade'，data）似乎也能工作。