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

我有一个下拉列表作为筛选器，然后总的帖子一次最多只能显示4条，除非单击“加载更多”按钮以显示另外4条记录。问题是下拉列表也仅从前四个记录中加载值。

这是我的出版物

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

我在控制器中的主要订阅

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

最佳答案

首先，为确保我了解您的情况，请改写一下：
您具有要使用类别进行排序的文档集合（类别存储在每个文档的专用字段中）。

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

另一方面，您一次只想显示4个项目。这4个显示的项目（以及那些之后可以加载的项目）是与过滤类别匹配的前4个项目。

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

我建议您：

您无需限制使用出版物加载的项目。首先，它会减慢用户界面的速度（每次都必须向服务器请求），其次，您可能无法注意到所需要的过滤。

一步步：


用简单的return Jobs.find();替换您的出版物。在这里，您无需进行筛选或限制显示项目的数量。这意味着现在，如果添加console.table(Job.find().fetch());，则将显示所有可用的作业。这将使下拉列表使用我建议您在your precedent question中使用的_.uniq来显示所需的所有类别。
您创建一个Session变量（或使用ReactiveVar的反应变量）来存储当前限制。您可以在模板rendered函数中甚至在模板created函数中初始化它：pageSession.set("limit", 4);，然后在“加载更多”按钮单击事件中根据需要对其进行修改。
您将在客户端代码中创建一个函数，以执行您的规则（限制显示的项目编号和类别筛选）。我们称之为filterAndLimitResults。您用来返回显示的作业的帮助程序将变成这样：

"displayedJobs": function() {return filterAndLimitResults(Job.find());}
您不需要“ moreResults”助手。摆脱它。您只需单击“更多结果”按钮上的一个事件，即可在其中更新ReactiveVar

Template.jobsList.events({ "click #showMoreResults": function(e, t) { e.preventDefault(); limit.set(limit.get()+4); },
您创建一个Session变量（或使用ReactiveVar的反应变量）以存储您当前选择的类别。您可以在模板rendered函数中甚至在模板created函数pageSession.set("chosenCategory", "");中对其进行初始化，然后根据需要在下拉项click事件中对其进行修改。
您现在需要编写您的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;
};

而且您应该很好:-)您几乎可以立即获得结果，并且它们是被动的。

ps：遵循相同的逻辑，您也可以毫无困难地按城市和/或任何其他字段进行过滤。

关于javascript - Dopdownlist正在填充有限值，而不是总集合中的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30829105/