I've been trying to get a simple JointJs program to run, but I keep getting the same error no matter what I do:
Uncaught TypeError: this.preinitialize is undefined
View Backbone
constructor joint.min.js:8
r Backbone
<anonymous> test.js:7
My browser just displays a blank page, with no changes made to it by the framework.
I installed JointJs using npm and made sample HTML and Javascript files following the tutorial here, with the only difference being that I put the code in a separate js file. I know this is not the problem, however, since I get the same error when I follow the tutorial exactly. Making matters even more confusing, I downloaded the project from github, ran npm install, and all the demos contained in there (that I've tried) work.
I think there's a problem with the way I set up my project, but I've fiddled with that so much by now I don't know what changes are left to try.
Please help.
test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" type="text/css" href="./js/modules/joint.min.css" />
</head>
<body>
<div id="joint">
</div>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/lodash/lodash.min.js"></script>
<script src="./node_modules/backbone/backbone-min.js"></script>
<script src="./node_modules/jointjs/dist/joint.min.js"></script>
<script src="./test.js"></script>
</body>
</html>
test.js:
var graph = joint.dia.Graph;
var paper = joint.dia.Paper({
el: document.getElementById('joint'),
model: graph,
width: 500,
height: 100,
drawGrid: true,
gridSize: 1
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Hello',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);