javascript - Dopdownlist 正在填充有限的值，而不是总集合中的值

Question

我有一个下拉列表作为过滤器，然后帖子总数限制为一次仅显示 4 条，除非单击“加载更多”按钮来显示另外 4 条记录。问题是下拉列表也仅加载前 4 条记录中的值。

这是我的出版物

Meteor.publish('allJobs', function(limit){
 if(!limit){
 return Jobs.find();
}
 return Jobs.find({}, {limit: limit});
});

我在 Controller 中的主要订阅

  waitOn: function() {
  return Meteor.subscribe("allJobs",4,this.findOptions());
  },

模板的助手

Template.jobsList.helpers({
'allJobs': function(){
  var filter ={};
  var category = Template.instance().selectedCategory.get();
  var city = Template.instance().selectedCity.get();
  var jtype = Template.instance().selectedJobType.get();
  if(jtype)
    filter.jtype = jtype;
  if(city)
    filter.city = city;
  if(category)
    filter.ccategory = category;
  return Jobs.find(filter);
     },
  'moreResults': function(){
    return !(Jobs.find().count() < Session.get("jobsLimit"));
  }
});

Template.jobsList.onRendered(function(){
    Session.setDefault("jobsLimit", 4);
    this.autorun(function(){
        Meteor.subscribe("allJobs", Session.get("jobsLimit"));
    });
});

我尝试为此进行另一个订阅，但没有成功。请帮忙提供最佳解决方案。

模板

<template name="jobsList">
  <div class="col s12 filter-holder">
        <div class="col m4 s4 filter-box">
          {{> categoryFilter}}
        </div>
        <div class="col m4 s4 filter-box">
         {{> cityFilter}}
        </div>
</div>

<div class="col s12">
  <ul class="collection" id="listings">
    {{#each allJobs}}
    <li>
      {{> jobItem}}
   </li>
   {{/each}}
  </ul>
  {{#if moreResults}}
  <button class="load-more" id="showMoreResults" type="submit">Load More
    <i class="mdi-content-send right"></i>
  </button>
  {{/if}}
</div>
</template>

请帮助我陷入这种情况

更新了js文件

var limit = new ReactiveVar;

var filterAndLimitResults = function (cursor, limit) {

if (!cursor) {
    return [];
}

var chosenCategory = limit.get("chosenCategory");

var raw = cursor.fetch();

// filter category
var filtered = [];
if (!chosenCategory || chosenCategory == "") {
    filtered = raw;
} else {
    filtered = _.filter(raw, function (item) {
        return item.category === chosenCategory;
    });
}

if (limit) {
    filtered = _.first(filtered, limit);
}
return filtered;
};

//模板创建函数

Template.jobsList.onCreated(function(){
limit.set(4);
limit.set("chosenCategory");
});

//模板辅助函数

Template.jobsList.helpers({
  "displayedJobs": function() {
  return filterAndLimitResults(Jobs.find(), (limit.get()));
   },
  'moreResults': function(){
    return !(Jobs.find().count() < limit.get());
      }
    });

下拉点击过滤

在渲染函数中声明

  Template.jobsList.onRendered(function(){
  limit.set(4);
  chosenCategory.set();
});

点击事件如下

 "click .categoryselection": function(e, t){
        e.preventDefault();
      chosenCategory.set(chosenCategory.get());

Answer 1

首先，为了确保我理解您的情况，让我重新表述一下: 您有一组文档，想要使用类别进行排序(每个文档都存储在专用字段中)。

一方面，您希望使用集合文档中所有可能的类别构建一个下拉列表，以便允许用户选择类别并过滤结果。

另一方面，您只想一次仅显示 4 个项目。这 4 个显示的项目(以及在它们之后可以加载的项目)是与过滤类别匹配的前 4 个项目。

您选择显示 4 × 4 项只是为了避免在用户界面中放置太多内容

我给你的建议是:

您无需限制使用出版物加载的项目。首先，它会减慢您的用户界面(您必须每次都向服务器发出请求)，其次您可能已经注意到，您将无法实现过滤。

一步一步:

1. 用简单的return Jobs.find();替换您的出版物。这不是您需要进行过滤或强制限制显示项目数量的地方。这意味着现在，如果您添加一个 console.table(Job.find().fetch()); 您将获得所有可用的作业以供显示。这将使下拉列表显示您需要的所有类别，使用我建议您在your precedent question中使用的_.uniq

2. 您创建一个 session 变量(或使用 ReactiveVar 的 react 变量)来存储您的当前限制。您可以在模板 rendered 函数中启动它，甚至在模板 created 函数中启动它:pageSession.set("limit", 4); 并且您可以根据需要在“加载更多”按钮单击事件中对其进行修改。

3. 您将在客户端代码中创建一个函数，以强制执行您的规则(限制显示的项目数量和类别过滤)。我们将其称为filterAndLimitResults。您用来返回显示的作业的助手将变成如下所示:

   “显示的作业”:函数(){ 返回filterAndLimitResults(Job.find()); }

4. 您不需要“moreResults”助手。摆脱它。您只需单击“更多结果”按钮即可创建一个事件，并在其中更新您的 ReactiveVar

   Template.jobsList.events({ “点击#showMoreResults”:函数(e，t){ e.preventDefault(); limit.set(limit.get()+4); },

5. 您创建一个 session 变量(或使用 ReactiveVar 的 react 变量)以存储当前选择的类别。您可以在模板 rendered 函数中启动它，甚至在模板 created 函数中启动它:pageSession.set("chosenCategory", "");然后您可以根据需要在下拉项单击事件中对其进行修改。

6. 您现在需要编写您的filterAndLimitResults。这是一个未经测试的示例:

   var limit = new ReactiveVar;
   var chosenCategory= new ReactiveVar;
   var filterAndLimitResults = function (cursor) {
   
       if (!cursor) {
           return [];
       }
   
       var raw = cursor.fetch();
       var currentChosenCategory = chosenCategory.get();
   
       // filter category
       var filtered = [];
       if (!currentChosenCategory || currentChosenCategory == "") {
           filtered = raw;
       } else {
           filtered = _.filter(raw, function (item) {
               return item.category === currentChosenCategory ;
           });
       }    
   var currentLimit =limit.get();
   // enforce your limit
   if (currentLimit ) {
       filtered = _.first(filtered, currentLimit );
   }
   
   return filtered;
   };
   

您应该可以开始了 :-) 您几乎可以立即得到结果，并且它们是 react 性的。

ps:遵循相同的逻辑，您应该可以轻松地按城市和/或任何其他字段进行过滤。