从Jade访问javascript库

Accessing javascript libraries from Jade

本文关键字：javascript 访问 Jade      更新时间：2023-09-26

我正在编写一个小型nodejs应用程序，从couchdb中获取内容，并计划使用vis.js将其可视化在这个过程中，我了解了快递、玉石，并利用了它们。然而，现在我意识到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);

这样做有意义吗？我有一些与压痕和空格有关的错误（就像翡翠一样）。谢谢

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

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希望所有元素要么按空格对齐，要么按制表符对齐，但不能同时按空格和制表符对齐。一旦我把所有的线都改成按空格对齐，它就起作用了。谢谢大家。

相关文章：