Блог

Главная - Вопросы по программированию - Неперехваченная ошибка типа при попытке использовать JointJS

Неперехваченная ошибка типа при попытке использовать JointJS

#javascript #typeerror #jointjs

Вопрос:

Я пытался запустить простую программу JointJS, но я продолжаю получать ту же ошибку, что бы я ни делал:

 Uncaught TypeError: this.preinitialize is undefined
    View Backbone
    constructor joint.min.js:8
    r Backbone
    <anonymous> test.js:7

Мой браузер просто отображает пустую страницу без каких-либо изменений, внесенных в нее фреймворком.

Я установил JointJS с помощью npm и создал примеры файлов HTML и Javascript, следуя приведенному здесь руководству, с той лишь разницей, что я поместил код в отдельный js-файл. Однако я знаю, что это не проблема, поскольку я получаю ту же ошибку, когда точно следую руководству. Что делает ситуацию еще более запутанной, я загрузил проект с github, запустил npm install, и все демо-версии, содержащиеся там (которые я пробовал), работают.

Я думаю, что есть проблема с тем, как я настраиваю свой проект, но я уже так много возился с этим, что не знаю, какие изменения осталось попробовать.

Пожалуйста, помогите.

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);
Метки: