首先,我是流星/节点的新手,所以请保持温和。
我试图运行https://github.com/RubaXa/Sortable,但我无法让任何样本在本地运行。
http://jsbin.com/xizeh/2/edit?html,js,output是一个我无法上班的应用示例应用。结果如下:
W20151202-10:36:50.714(-6)? (STDERR)
W20151202-10:36:50.714(-6)? (STDERR) ~/.meteor/packages/meteor-tool/.1.1.10.1b51q9m++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
W20151202-10:36:50.714(-6)? (STDERR) throw(ex);
W20151202-10:36:50.714(-6)? (STDERR) ^
W20151202-10:36:50.717(-6)? (STDERR) ReferenceError: sortTrue is not defined
W20151202-10:36:50.717(-6)? (STDERR) at hello.js:2:17
W20151202-10:36:50.717(-6)? (STDERR) at ~/IdeaProjects/meteor_test_project/.meteor/local/build/programs/server/app/hello.js:22:4
W20151202-10:36:50.717(-6)? (STDERR) at ~/IdeaProjects/meteor_test_project/.meteor/local/build/programs/server/boot.js:242:10
W20151202-10:36:50.718(-6)? (STDERR) at Array.forEach (native)
W20151202-10:36:50.718(-6)? (STDERR) at Function._.each._.forEach (~/.meteor/packages/meteor-tool/.1.1.10.1b51q9m++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20151202-10:36:50.718(-6)? (STDERR) at ~/IdeaProjects/meteor_test_project/.meteor/local/build/programs/server/boot.js:137:5
=> Exited with code: 8
我已尝试添加
var sortTrue = document.getElementById("sortTrue");
var sortFalse = document.getElementById("sortFalse");
只是为了获得ReferenceError: document is not defined
,我认为这是因为javascript是在文档加载之前运行的。所以,我尝试将它包装在if (Meteor.isClient)
中,此时页面加载,但元素不会移动/排序。控制台显示此错误:
Uncaught Sortable: `el` must be HTMLElement, and not [object Null]
Sortable @ rubaxa_sortable.js:216
Sortable.create @ rubaxa_sortable.js:1281
(anonymous function) @ hello.js:15
(anonymous function) @ hello.js:28
我觉得流星框架本身存在问题 - 但我已经能够让所有其他示例应用程序正常工作(例如https://www.meteor.com/tutorials/blaze/creating-an-app处的应用程序运行完美)
请注意,我尝试了大量不同的Sortable示例,所有示例都具有相同的结果。它不是这个单一的应用程序。
答案 0 :(得分:1)
根据Kyll对我的问题的评论,我能够得到链接的示例 脚本(修改):
if (Meteor.isClient) {
Template.body.onRendered(function(){
// sort: true
Sortable.create(sortTrue, {
group: "sorting",
sort: true
});
// sort: false
Sortable.create(sortFalse, {
group: "sorting",
sort: false
});
})
}
Meteor HTML:
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- Latest Sortable -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<!-- sort: true -->
<div id="sortTrue" class="list-group">
<div class="list-group-item">foo</div>
<div class="list-group-item">bar</div>
<div class="list-group-item">baz</div>
</div>
<!-- sort: false -->
<div id="sortFalse" class="list-group">
<div class="list-group-item">qux</div>
<div class="list-group-item">quux</div>
</div>
</body>
请注意,Sortable.create()函数的第一个参数是id
节点的<div>
,它封装了您要进行排序的列表。
CSS:
body {
padding: 20px;
}
.list-group-item {
cursor: move;
cursor: -webkit-grabbing;
}
您还必须在项目工作区中运行meteor add rubaxa:sortable
,然后将rubaxa:sortable
添加到<projectDIr>/.meteor/packages