实现一个可排序的图像集合在 Meteor 中不起作用答案

【问题标题】：Implementing a sortable Image collection not working in Meteor实现一个可排序的图像集合在 Meteor 中不起作用
【发布时间】：2023-03-16 17:53:03
【问题描述】：

实现可排序的图像集合不起作用

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

代码中还有什么需要添加或修改的？

【问题讨论】：

codepen.io/sangeeth5320/pen/QywjVL?editors=101
代码不长，可以发在这里加个链接就好了。
看来您已经外包了对理解您的问题至关重要的数据。请在问题本身中发布所有相关代码、图像和资源，如果链接失效或发生更改，您的问题将失去大部分（如果不是全部）意义！您可以edit您的问题以包含所需的信息。另外，您能否详细说明您的代码如何不起作用？你期待什么，实际发生了什么？如果您遇到异常，请发布发生异常的行和异常详细信息。
@kyll 在 gallery.rendered 函数中将 this.$('#Images').sortable 替换为 this.$('#grid-container).sortable 。它之所以有效，是因为 Images 是一个集合名称，而 grid-container 是要使用的 id 名称。
你用的是什么模板库？这和流星有什么关系？

标签： javascript meteor jquery-ui-sortable

【解决方案1】：

在您的代码中，我们没有：

名为 Images 的集合
名为 image 的模板

根据我所拥有的，我可以说：

Template.gallery.rendered 应重命名为 Template.gallery.onRendered(function(){...});
在渲染函数中，调用sortable。如果您想使用库操作 DOM，可能是问题。尝试只使用 blaze，然后您可以测试您的库是否可以使用 blaze。
Meteor.subscribe('images') 只能调用 1 次

【讨论】：

因为我在两个不同的文件中有图像集合和名为图像的模板，此处未包含。所以这可能不是问题.. 你能详细说明如何在 onRendered 函数中使用该 sortable 吗？并且还用blaze如何测试。一小块可能会很感激。
问题已解决。 codepen.io/sangeeth5320/pen/wMBmbb 中的更正代码在可排序函数中，而不是使用 div 类名使用了集合名。这是以前的问题。