javascript - Implementing a sortable Image collection not working in Meteor

Question

Implementing a sortable Image collection doesn't work

<template name="gallery">
  <div id="grid-container" class="cbp-l-grid-agency grid">
    {{#each images getCurrentCategory}}
    {{> image}}
    {{/each}}
  </div>
</template>

Template.gallery.created = function(){
    Tracker.autorun(function () {
        Meteor.subscribe('images'), self.limit.get()
    });
}
Template.gallery.rendered = function(){
    //// Image reordering /////
     this.$('#Images').sortable({
        stop: function(e, ui) {
          el = ui.item.get(0)
          before = ui.item.prev().get(0)
          after = ui.item.next().get(0)
          if(!before) {
            newRank = Blaze.getData(after).rank - 1
          } else if(!after) {
            newRank = Blaze.getData(before).rank + 1
          }
          else
            newRank = (Blaze.getData(after).rank +
                       Blaze.getData(before).rank)/2
          Images.update({_id: Blaze.getData(el)._id}, {$set: {rank: newRank}})
        }
    })
}
Template.gallery.helpers({
    'getCurrentCategory': 
        function() {
        return Template.instance().currentcategory.get();
      },
    'category': function(){
        var allImages = Images.find().fetch();
        var categoryList = _.uniq(allImages, false, function(d) {return d.category});
        var a = _.pluck(categoryList, "category");
        return a;
    },   
    'images': function (currentcategory) {
      if(currentcategory == 'all' || !currentcategory){
        return Images.find({},{sort: {rank: -1}});
     } 
     return Images.find({category:currentcategory});
    }
});

What else need to be added or to be modified in the code ?

Answer 1

In your code, we do not have:

• the collection named Images
• the template named image

And from what I have, I can say :

• Template.gallery.rendered should be renammed into Template.gallery.onRendered(function(){...});
• In your rendered function, you call sortable. If you want to manipulate the DOM with a library, it may be the issue. Try to do it using only blaze, and then you can test to see if your library is ok with blaze.
• Meteor.subscribe('images') can be call only 1 time