nodejsでjointjsを使う方法

Question

私はjavascript、jointjs、nodejsの新しいユーザーです。

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

私はNode.jsのプロジェクトのフローチャートをプロットするためにjointjsを使用したいので、私はに応じて以下のようにindex.jsを変更します。私はnodejsプロジェクトをビルドするためにwebstormを使用 、ファイル構造は以下の通りですポスト： Explain or demonstrate integration between JointJS and 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; 

、私は応答にgraph.toJSON（）オブジェクトを送信する方法について混乱していますか？どのようにしてindex.jadeにグラフオブジェクトをレンダリングできますか？ ありがとうございます。

Answer 1

graph.toJSON（）オブジェクトを返信する方法は？

あなたは以下のような機能をレンダリングを経由して、応答にデータを送信することができます：私はあなたが精通する必要がindex.jadd

1. でグラフオブジェクトをレンダリングすることができますどのように

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

   jade Jade Lang

2. 次に、このチュートリアルに従います。http://www.jointjs.com/tutorial
3. joinjsのサーバー側のデータがないので、ブラウザーでサンプルコードを実行するだけです。

Answer 2

私は、ajaxを使用して問題を解決しています。サーバー側でクライアント

$('#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); 
      }); 
     }; 
    }); 

でJSで

、

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

しかし、私はまだjointjsオブジェクトに、サーバー上のヒスイをレンダリングする方法がわからないと、直接にレンダリングされたHTMLを返しますsvg、res.render（ 'index'、{title： 'Express'、graph：graph.toJSON（）}）; 誰でも助けてくれますか？ありがとうございます。