rubaxa:sortable (Meteor) dying with error "TypeError: templateInstance.collection.findOne is not a function"

Question

Using Meteor I implemented a pretty basic rubaxa:sortable instance. Not using multiple sortable lists or anything fancy. Pre-loaded "order" data in my Mongo Collection with unique numbers 1, 2, 3, etc.

Everything displays fine, and lets you sort once then the package dies when it tries to save the new order to the DB.

Error in the browser console is:

TypeError: templateInstance.collection.findOne is not a function. (In 'templateInstance.collection.findOne(itemId)', 'templateInstance.collection.findOne' is undefined)
adjustOrdersrubaxa_sortable.js:1404
sortableUpdaterubaxa_sortable.js:1446
_dispatchEventrubaxa_sortable.js:1102
_onDroprubaxa_sortable.js:799
(anonymous function)
handleEventrubaxa_sortable.js:853

Relevant code snippets below...

Server:

Products = new Mongo.Collection('products');
Sortable.collections = ['products'];`

Client JS:

Meteor.startup(function() {
  Mongo.Products = new Mongo.Collection('products');
});

Client HTML:

<div class="sortable target" id="object">
  {{#sortable items=products animation="100" handle=".sortable-handle" ghostClass="sortable-ghost" sortField="order"}}
    {{> productSettingsRow}}
  {{/sortable}}
</div>`

<template name="productSettingsRow">
  <div data-id="{{order}}" class="sortable-item well well-sm">
    <div class="row">
    ...
    <div class="col s5">
      <div class="input-field">
        <input id="{{sku}}-displayName" type="text" value="{{displayName}}">
      </div>
    </div>
     ...
    <div class="col s1">
      <i class="sortable-handle mdi-action-view-headline pull-right"></i>
    </div>
  </div>
</div>

Tried searching on the error; don't see anything quite like this though #578 here seems similar(?): https://github.com/RubaXa/Sortable/issues/578

Any suggestions, or any other info I can provide to help debug? (Also posted this to the GitHub repo as suggested.)

Answer 1

You need to define collections both on the client and the server. So all you might be missing is to put:

Products = new Mongo.Collection('products');
Sortable.collections = ['products'];

in a shared place, such as /lib/common.js.

Answer 2

Partial Solution Found...

The helper that was passing in the "products" collection was set up like this:

Template.productSettings.helpers({
  products : function() {
    return Mongo.Products.find().fetch();
  }
});

It should have been:

Template.productSettings.helpers({
  products : function() {
    return Mongo.Products.find();
  }
});

This way it's a pointer rather than an array. rubaxa:sortable doesn't yet handle arrays.

(Still working through a DB storage problem; this plugin doesn't seem to work out of the box with Meteor -- gives "Access Denied" when you try to update. Will try to sort that out tomorrow.)