Dopdownlist正在填充有限值，而不是总集合中的值 [英] Dopdownlist is being populated with limited values instead of values from total collection

问题描述

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

I have a dropdownlist as filters and then there's the total posts with a limit of displaying only 4 at a time unless a load more button is clicked to show another 4 records. problem is the dropdownlist is also loading values only from that first 4 records.

这是我的出版物

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

我在控制器中的主要订阅

my main subscription in the 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"));
    });
});

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

i tried to make another subscription for this but it didn't work out. Please help with a best solution.

模板

<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>

请帮助我在这种情况下陷入困境

Please help i am stuck in this situation

更新的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());

推荐答案

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

First, just to be sure I understand your situation, let me rephrase it: You have a collection of documents that you want to sort using categories (which are stored for each document in a dedicated field).

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

On one hand, you want to build a dropdown using all the possible categories in your collection documents in order to allow the user to select a category and filter the results.

另一方面，您一次只希望显示4个项目.这4个显示的项目(以及那些之后可以加载的项目)是与过滤后的类别匹配的前4个项目.

On the other hand, you want to display only 4 items at a time. These 4 displayed items (and those who could be loaded after them) are the 4 first items matching the filtered category.

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

Your choice of displaying items 4 by 4 is only to avoid to put too much content in user interface

我建议您的是:

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

You don't need to limit the items you load using your publication. First, it will slow down your user interface (you have to request to the server each time), second you wont be able to achieve the filtering as you may have noticed.

逐步:

1. 用简单的return Jobs.find();替换发布.在这里，您不需要进行筛选或限制显示项目的数量.这意味着，现在，如果添加console.table(Job.find().fetch());，则将显示所有可用的作业.使用我建议您在，然后在加载更多"按钮单击事件中根据需要对其进行修改.

1. replace your publication with a simple return Jobs.find(); This is not the place where you need to do your filtering or enforce limit to the number of displayed items. It means that now, if you add a console.table(Job.find().fetch()); you will get all the available jobs for display. That will make the dropdown display all the categories you need, using the _.uniq I advised you to use in your precedent question

2. You create a Session variable (or a reactive variable using ReactiveVar) to store your current limit. you initate it in your template rendered function, or even in the template created function: pageSession.set("limit", 4); and you modify it as you need in your "load more" button click event.

您将在客户端代码中创建一个函数，以强制执行您的规则(限制显示的项目编号和类别筛选).我们称之为filterAndLimitResults.您用来返回显示的作业的帮助程序将变成这样:

You will create a function in your client code in order to enforce your rules (limit to displayed items number and categry filtering). Let's call it filterAndLimitResults. The helper that you use to return the displayed jobs will become something like this:

"displayedJobs": function() { return filterAndLimitResults(Job.find()); }

"displayedJobs": function() { return filterAndLimitResults(Job.find()); }

您不需要"moreResults"帮助器.摆脱它.您只需点击更多结果按钮创建一个事件，即可在其中更新ReactiveVar

You don't need a "moreResults" helper. Get rid of that. You just create an event on click on the more results button where you update your ReactiveVar

Template.jobsList.events({ "click #showMoreResults": function(e, t) { e.preventDefault(); limit.set(limit.get()+4); },

Template.jobsList.events({ "click #showMoreResults": function(e, t) { e.preventDefault(); limit.set(limit.get()+4); },

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

You create a Session variable (or a reactive variable using ReactiveVar) in order to store your currently selected category. you initate it in your template rendered function, or even in the template created function: pageSession.set("chosenCategory", ""); and you modify it as you need in your dropdown items click event.

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

You need now to write your filterAndLimitResults. Here is an untested example:

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;
};

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

And you should be good to go :-) You get your results almost instantly and they are reactive.

ps:按照相同的逻辑，您也可以轻松按城市和/或任何其他字段进行过滤.

ps: following the same logic, you should have no trouble to filter by cities too and/or any other field.

这篇关于Dopdownlist正在填充有限值，而不是总集合中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！