Jquery-UI可排序列表与Meteor模板中的响应更新不一致

Question

我正在尝试使用JQuery-UI以http://differential.com/blog/sortable-lists-in-meteor-using-jquery-ui中描述的方式实现可排序的对象列表.

但是,我正在排序嵌入在单个文档中的对象列表,而不是对单独文档的列表进行排序.也就是说,我有一个这样的文件:

{  name: "Name of this Rolodex",
   cards: [{name: "...", rank: 0, id: "some-unique-id"},
           {name: "...", rank: 1, id: "some-other-unique-id"}, ... ]
}

我只想让这些卡片可以分类.我的模板如下 - 它传递了一个Rolodex作为上下文:

<template name="rolodex">
  Rolodex Name: {{name}}
  <div class="cards-list">
    {{#each sortedCards}}
      {{> cardTemplate}}
    {{/each}}
  </div>
</template>

和助手JS文件:

Template.rolodex.helpers({
  sortedCards: function() {
    return this.cards.sort(function(cardA, cardB) {
      return cardA.rank - cardB.rank;
    });
  }
});

Template.rolodex.rendered = function() {
  this.$(".cards-list").sortable({
    stop: function(e, ui) {
      // Get dragged HTML element and one immediately before / after
      var el = ui.item.get(0)
      var before = ui.item.prev().get(0)
      var after = ui.item.next().get(0)

      // Calculate new rank based on ranks of items before / after
      var newRank;
      if(!before) {
        // First position => set rank to be less than card immediately after
        newRank = Blaze.getData(after).rank - 1;
      } else if(!after) {
        // Last position => set rank to be more than card immediately after
        newRank = Blaze.getData(before).rank + 1;
      } else {
        // Average before and after
        newRank = (Blaze.getData(after).rank + 
                   Blaze.getData(before).rank) / 2;
      }

      // Meteor method that updates an attribute for a single card in a
      // Rolodex based on IDs for the Rolodex and Card
      Meteor.call('cards/update',
                  Blaze.getData(ui.item.parent().get(0))._id, // Rolodex ID
                  Blaze.getData(el).id, // Card ID
                  {rank: newRank});
    }
  });
};

我遇到的问题是,在将卡分类到其预期位置之后,然后使用卡在新的错误位置更新DOM.服务器存储了正确的排名,刷新页面会使卡列在正确的位置(至少在尝试另一种排序之前).

我最好的猜测是,Meteor的模板系统似乎并不理解JQuery-UI已经移动了DOM元素并且以错误的顺序反复更新我的模板.

例如,假设我的卡片是:A,B,C.我移动C使得我们现在有C,A,B.JQuery-UI相应地更新DOM并触发一个事件,导致C的等级被改为小于如.

但是,Meteor并不知道DOM已经被JQuery-UI改变了.但是,它确实将排名变为C,并根据先前关于列表顺序的假设反应性地更新列表的顺序.在这种情况下,我们最终得到B,C,A.

关于我在这里做错了什么的建议？

Answer 1

Meteor/Blaze使用_id属性来标识数据对象并将它们链接到DOM元素.这不仅适用于Collection光标返回的文档数组,也适用于任何对象数组.所以在上面的问题中,问题是我用一个id值来识别每张卡而不是_id.切换id到_id修复问题并允许Blaze正确更新DOM,即使DOM先前已被JQuery-UI的可排序插件修改.