Question

我正在编写一个小的nodejs应用程序来从couchdb中获取内容并计划使用vis.js将其可视化在这个过程中，我学会了快递，玉和利用它们。但是现在我意识到必须从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);

这样做有意义吗？我有与缩进和空格有关的错误（对于玉来说是典型的）。谢谢！

Answer 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

Answer 2

确保在模板中加载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);

Answer 3

看起来Jade希望所有元素都按空格或制表符对齐，但不能同时对齐。一旦我改变了所有要按空间对齐的线条，就可以了。谢谢大家。

从Jade访问javascript库

3 个答案: