[英]JointJS: Hello World example doesn't work
當我從JointJS網站嘗試Hello World示例時,我總是看到這個異常:
Uncaught TypeError: Cannot call method 'getStrokeBBox' of undefined
這是代碼:
<!DOCTYPE html>
<html>
<head>
<!--
<link rel="stylesheet" href="css/joint.css" />
<script src="js/joint.js"></script>
-->
<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css"></link>
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var rect = 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 rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</head>
<title>Test</title>
<body>
<div id="myholder"> </div>
</body>
</html>
我看到這里已經有另一個問題要問同一個問題,但是那里給出的解決方案並不相關,因為我已經有了一個紙質對象的div元素。
el: $('#myholder'),
瀏覽器從上到下閱讀。 瀏覽器在找到id為myholder
的元素之前執行此行,因此el
是一個空的jQuery對象。
相反,將腳本標記移動到HTML的底部(因此瀏覽器在您嘗試獲取之前找到了myholder
)或將其全部包裝在$(document).ready(
調用 。
您正在嘗試獲取尚未創建的元素。 將腳本放在<body>
的末尾或使用$(document).ready();
你是 不 使用jQuery所以這將工作:
window.onload = function () { your entire javascript code here };
但最好還包括jQuery.js並使用:
$(function () { your entire javascript code here });
代碼是逐行執行的,因此它首先加載並運行您的javascript並且不知道“myholder”是什么。 像我上面解釋的那樣,它將加載javascript但它只會在整個頁面加載后執行它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.