流星收集更新未在客户端正确更新

Question

我正在尝试更新文档。具体来说，我正在更改项目的顺序 - 对象数组。该数组称为“资源”。我调用一个方法来更新资源数组中每个对象的位置。从数据库中可以看出，文档已按正确的顺序更新。

更新时，正如预期的那样，客户端会做出反应 - 并使用新数据进行更新 - 但是，它似乎以错误的顺序显示数组......就像它的“一出”......（所以项目移动到索引 2 出现在索引 1...移动到索引 3 的项目出现在索引 2 等）但是当我对浏览器进行物理刷新时 - 数据按预期加载。有人在这里有类似（但不相同）的问题 - Meteor collection insert not updating on client - 尽管没有一个答案对我的问题有帮助。

在我的 router.js 文件中（我使用的是 ironrouter）

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading',
  notFoundTemplate: 'notFound',
  waitOn: function() {
   return [ Meteor.subscribe('playlists'), Meteor.subscribe('resources') ];
  }
});

.....

Router.route('/playlist/:_id', {
  name: 'playlistPage',
  data: function() { 
    return Playlists.findOne(this.params._id); 
  }
});

在我拥有的客户端上：

          ...
'click #saveOrder': function(e, template) {
     e.preventDefault();

     var currentplaylistId = (template.data._id);

     var resourcesArray = [];
     $('#playlistTableBody tr').each(function(i) {
       var $this = $(this);
       var data = {
           title: $this.data('title'),
           type: $this.data('type'),
           resourceid: $this.data('resourceId'),
           duration: $this.data('duration'),
           order:  i
           }
           resourcesArray.push(data);
      });




Meteor.call('playlistUpdateResourceOrder', 
currentplaylistId, resourcesArray, function(error, result) {
    // display the error to the user and abort
     if (error)
     return throwError(error.reason);
     // Refresh data?
     Router.go('playlistPage', {_id: result._id});
});

和服务器

  playlistUpdateResourceOrder: function (currentplaylistId, resourcesArray) {
    Playlists.update(currentplaylistId, {
      $set: { resources: resourcesArray }
    });
    return {
      _id: currentplaylistId // return to our updated / renamed playlist
    };

  }

我的模板很简单：

   <tbody id="playlistTableBody">
  {{#each resources }}
    {{>resourceItem}}
  {{/each}}
</tbody>

和

<template name="resourceItem">
<tr data-title="{{title}}" data-type="{{type}}" data-resourceid="{{resourceId}}" data-duration="{{duration}}">
<td>{{title}}</td>
<td>{{type}}</td>
</tr>
</template>

Answer 1

始终在客户端对数据进行排序。因为如果你在 Meteor.publish 中对数据进行排序，它只会在初始加载时对数据进行排序。

显示已排序资源的模板如下所示：

<template name="yourTemplate">
  {{#each resources}}
    {{>resourceItem}}
  {{/each}}
</template>

而您的助手称为 "resources"，它返回已排序的资源：

Template.yourTemplate.helpers({
  resources: function() {
    return Resources.find({}, { sort: { order: 1 } });
  }
});

您可以在助手或路由器中返回您的数据。重要的部分是：

//Always sort collection on the client
Resources.find({}, { sort: { order: 1 } });

编辑：要对子文档进行排序，您可以使用下划线函数sortBy。下划线默认在 Meteor 应用中：

var subDoc = [{ title: 'asdf', order: 2 }, { title: 'ah', order: 1 }];
//Sorting by order
var sorted = _.sortBy(subDoc, function(item) { 
  return item.order 
});