如何在nodejs中使用jointjs

I am new user of javascript, jointjs and nodejs. I use webstorm to build a nodejs project, the file structure is as below:

我是javascript,jointjs和nodejs的新用户。我使用webstorm构建一个nodejs项目,文件结构如下:

/test
 /bin
   www
 /node_modules
 /public
 /routes
   index.js
   users.js
 /views
   error.jade
   index.jade
   layout.jade
 app.js
 pacakge.json

I want to use jointjs to plot flowchart in the node.js project, so I change the index.js as below according to the post: Explain or demonstrate integration between JointJS and Node.js

我想使用jointjs在node.js项目中绘制流程图,所以我根据帖子更改了index.js:解释或演示JointJS和Node.js之间的集成

index.js

var express = require('express');
var router = express.Router();
var joint = require('jointjs');
var graph = new joint.dia.Graph;

var el1 = new joint.shapes.basic.Rect({position: {x: 50, y: 50}, attrs: {text: {fill: 'yellow'}}});
var el2 = new joint.shapes.basic.Rect({position: {x: 300, y: 200}, attrs: {text: {fill: 'yellow'}}});
var link = new joint.dia.Link({source: {id: el1.id}, target: {id: el2.id}});
graph.addCells([el1, el2, link]);

/* GET home page. */
router.get('/', function (req, res, next) {
    res.render('index', {title: 'Express'});
});

module.exports = router;

Then, I am confused about how to send the graph.toJSON() object to response? How can I render the graph object in the index.jade? Thank you very much.

然后,我对如何将graph.toJSON()对象发送到响应感到困惑?如何在index.jade中渲染图形对象?非常感谢你。

3 个解决方案

#1

how to send the graph.toJSON() object to response?

如何将graph.toJSON()对象发送到响应?

you can send data to response via render function like below:

您可以通过渲染功能将数据发送到响应,如下所示:

res.render('index', {title: 'Express', graph: graph.toJSON()});

How can I render the graph object in the index.jadd

如何在index.jadd中渲染图形对象

You need to be familiar with jade Jade Lang

你需要熟悉玉玉郎

Then you can follow this tutorial http://www.jointjs.com/tutorial

然后你可以按照这个教程http://www.jointjs.com/tutorial

as there is no server side data for joinjs, you can just run the sample code in browser.

由于joinjs没有服务器端数据,您只需在浏览器中运行示例代码即可。

#2

I kind of solve the problem by using ajax.

我通过使用ajax来解决问题。

On JS in client

在客户端的JS上

$('#search').on('keyup', function(e){
        if(e.keyCode === 13) {
            var parameters = { search: $(this).val() };
            $.get( '/searching',parameters, function(data) {
                // $('#results').html(data);
                // var java = JSON.parse(data);

                var graph = new joint.dia.Graph;

                var paper = new joint.dia.Paper({
                    el: $('#container'),
                    width: 800,
                    height: 200,
                    model: graph,
                    gridSize: 1
                });
                var x = JSON.parse(data);
                graph.fromJSON(x);
            });
        };
    });

On server side,

在服务器端,

var joint = require('jointjs');
var graph = new joint.dia.Graph;

var el1 = new joint.shapes.basic.Rect({
    position: {x: 100, y: 30},
    size: {width: 100, height: 30},
    attrs: {rect: {fill: 'blue'},
    text: { text: 'my box', fill: 'white' }}
});
var el2 = el1.clone();
el2.translate(300);
var link = new joint.dia.Link({source: {id: el1.id}, target: {id: el2.id}});
graph.addCells([el1, el2, link]);
var jsonString = JSON.stringify(graph.toJSON());
res.send(jsonString);

However, I still don't know how to render jade on server with jointjs object and directly return the rendered html with svg, if I use res.render('index', {title: 'Express', graph: graph.toJSON()}); Can anybody help about that?Thanks.

但是,我仍然不知道如何使用jointjs对象在服务器上呈现jade并直接使用svg返回呈现的html,如果我使用res.render('index',{title:'Express',graph:graph.toJSON( )});有人可以提供帮助吗?谢谢。

#3

var strjson = JSON.stringify(graph.toJSON());

var objjson = JSON.parse(strjson);

graph2.fromJSON(objjson);

#1