Бег Сортируемый в Метеоре

Во-первых, я новичок в метеорите / узле, поэтому, пожалуйста, будьте осторожны.

Я пытаюсь запустить 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 работает отлично)

Обратите внимание, что я пробовал множество различных сортируемых примеров, все с одинаковыми результатами. Это не единственное приложение.

Источник

1 ответ

На основании комментария Килла на мой вопрос я смог получить связанный пример работы со скриптом (модифицированный):

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
        });
    })

}

Метеор 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

Источник
Другие вопросы по тегам