如何在流星项目中使用 JSplumb(流星项目版本 0.6.5.1)
How to use JSplumb within meteor project (meteor project release 0.6.5.1)
我想在我的流星项目中使用 jsPlumb
。当我查看网络时,我看到您可以使用 meteor add jsplumb:jsplumb
命令包含它。但是,我是 运行 我的带有 mrt --release 0.6.5.1
标志的流星项目。因此,我认为我不能使用它。有没有办法将 jsPlumb 添加到我的项目中?
编辑
按照建议,我把 JsPlumb-1.7.10.js 放在了 client/compatibility 下。然后我创建了一个名为 flowchart.js
的文件,其内容是:
jsPlumb.ready(function() {
jsPlumb.setContainer($('#container'));
var i = 0;
$('#container').dblclick(function(e) {
var newState = $('<div>').attr('id', 'state' + i).addClass('item');
var title = $('<div>').addClass('title').text('State ' + i);
var connect = $('<div>').addClass('connect');
newState.css({
'top': e.pageY,
'left': e.pageX
});
newState.append(title);
newState.append(connect);
$('#container').append(newState);
jsPlumb.makeTarget(newState, {
anchor: 'Continuous'
});
jsPlumb.makeSource(connect, {
parent: newState,
anchor: 'Continuous'
});
jsPlumb.draggable(newState, {
containment: 'parent'
});
newState.dblclick(function(e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
i++;
});
});
我的 flowchart.html
文件是:
<template name="flowchart">
<style type="text/css">
.item {
position: absolute;
border: 1px solid black;
background-color: #ddddff;
}
#container {
border: 1px solid gray;
width: 500px;
height: 500px;
}
.title {
padding: 10px;
cursor: move;
}
.connect {
width: 100%;
height: 20px;
background-color: white;
cursor: pointer;
}
</style>
<div id="container"></div>
</template>
但是当我转到 http://localhost:3000/flowchart
时出现以下错误:
Uncaught ReferenceError flowchart.js: jsPlumb is not defined
什么可能导致此问题?
顺便说一下,这是我找到的示例 here
您可能不需要使用 jsplumb 流星包来添加它。获取 jsPlumb-1.7.10.js 文件并将其粘贴到名为 client/compatibility
.
的文件夹中
更好的解决方案是更新 Meteor。是可行的。
我想在我的流星项目中使用 jsPlumb
。当我查看网络时,我看到您可以使用 meteor add jsplumb:jsplumb
命令包含它。但是,我是 运行 我的带有 mrt --release 0.6.5.1
标志的流星项目。因此,我认为我不能使用它。有没有办法将 jsPlumb 添加到我的项目中?
编辑
按照建议,我把 JsPlumb-1.7.10.js 放在了 client/compatibility 下。然后我创建了一个名为 flowchart.js
的文件,其内容是:
jsPlumb.ready(function() {
jsPlumb.setContainer($('#container'));
var i = 0;
$('#container').dblclick(function(e) {
var newState = $('<div>').attr('id', 'state' + i).addClass('item');
var title = $('<div>').addClass('title').text('State ' + i);
var connect = $('<div>').addClass('connect');
newState.css({
'top': e.pageY,
'left': e.pageX
});
newState.append(title);
newState.append(connect);
$('#container').append(newState);
jsPlumb.makeTarget(newState, {
anchor: 'Continuous'
});
jsPlumb.makeSource(connect, {
parent: newState,
anchor: 'Continuous'
});
jsPlumb.draggable(newState, {
containment: 'parent'
});
newState.dblclick(function(e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
i++;
});
});
我的 flowchart.html
文件是:
<template name="flowchart">
<style type="text/css">
.item {
position: absolute;
border: 1px solid black;
background-color: #ddddff;
}
#container {
border: 1px solid gray;
width: 500px;
height: 500px;
}
.title {
padding: 10px;
cursor: move;
}
.connect {
width: 100%;
height: 20px;
background-color: white;
cursor: pointer;
}
</style>
<div id="container"></div>
</template>
但是当我转到 http://localhost:3000/flowchart
时出现以下错误:
Uncaught ReferenceError flowchart.js: jsPlumb is not defined
什么可能导致此问题?
顺便说一下,这是我找到的示例 here
您可能不需要使用 jsplumb 流星包来添加它。获取 jsPlumb-1.7.10.js 文件并将其粘贴到名为 client/compatibility
.
更好的解决方案是更新 Meteor。是可行的。