通过客户端更改集合的排序方式

Question

我有一个显示在页面上的集合：

Template.body.helpers({
  chansonsFutures(){
    return Chansons.find({
      "playedStatus":false
    },{
      sort : { score:-1 }
    });
  },
});

而且我希望用户能够更改集合的排序方式。在示例中，它按 score 排序，但我将如何按其他排序？

我有一个 select :

  <select id="ordre">
    <option value="shuffle">Aléatoire</option>
    <option value="vote">Vote</option>
    <option value="lastAdded">Dernier Ajout</option>
  </select>

但是如果我在 Template.body.helpers 中放置一个 if 条件，meteor 会告诉我的应用程序有错误并且正在等待文件更改。如果我把条件放在 Template.body.events 和 link 到我的 select 的 change，它也会给我错误。

我应该如何进行？

编辑：回答@Justinas，这是我将条件放入代码的方式。

我的第一次尝试是直接在助手中：

Template.body.helpers({

if(document.getElementById("ordre").value == "lastAdded"){
  chansonsFutures(){
    return Chansons.find({
      "playedStatus":false
    },{
      sort : { lastAdded:-1 }
    });
  },
};

else if (other value for the select) {
    other stuff happens
};
});

另一种方式是这样的:

Template.body.events({

  'change #ordre'(event){
    event.preventDefault();

    chansonsFutures(){

      return Chansons.find({
        "playedStatus":false
      },{
        sort : { document.getElementById("ordre").value:-1 }
      });
    },
  },
});

Answer 1

这是您需要在 js 文件中添加的内容：

默认情况下它将位于 'score' 并且在更改 select 值时它会相应地更改。

    Template.body.onCreated(function() {
      this.sortBy = new ReactiveVar('score');
    })
    Template.body.helpers({

      chansonsFutures : function(){
        var sortParam = Template.instance().sortBy.get();
        return Chansons.find({
          "playedStatus":false
        },{
          sort : { sortParam:-1 }
        });
      },
    });


 Template.body.events({
       'change #ordre':function (event,templateInstance) {
         var sortSelected = $('#ordre option:selelcted').val();
         templateInstance.sortBy.set(sortSelected)
       }
    })

通过客户端更改集合的排序方式

Change the way a collection is sorted through the client

javascript

meteor