javascript - Dopdownlist is being populated with limited values instead of values from total collection -

i have dropdownlist filters , there's total posts limit of displaying 4 @ time unless load more button clicked show 4 records. problem dropdownlist loading values first 4 records.

here publication

meteor.publish('alljobs', function(limit){  if(!limit){  return jobs.find(); }  return jobs.find({}, {limit: limit}); }); 

my main subscription in controller

  waiton: function() {   return meteor.subscribe("alljobs",4,this.findoptions());   }, 

helpers template

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 make subscription didn't work out. please best solution.

template

<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 stuck in situation

updated js file

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

template.jobslist.oncreated(function(){ limit.set(4); limit.set("chosencategory"); }); 

// template helper function

template.jobslist.helpers({   "displayedjobs": function() {   return filterandlimitresults(jobs.find(), (limit.get()));    },   'moreresults': function(){     return !(jobs.find().count() < limit.get());       }     }); 

dropdown click filtering

declaring in rendered function

  template.jobslist.onrendered(function(){   limit.set(4);   chosencategory.set(); }); 

and click event follows

 "click .categoryselection": function(e, t){         e.preventdefault();       chosencategory.set(chosencategory.get()); 

first, sure understand situation, let me rephrase it: have collection of documents want sort using categories (which stored each document in dedicated field).

on 1 hand, want build dropdown using possible categories in collection documents in order allow user select category , filter results.

on other hand, want display 4 items @ time. these 4 displayed items (and loaded after them) 4 first items matching filtered category.

your choice of displaying items 4 4 avoid put content in user interface

what advise is:

you don't need limit items load using publication. first, slow down user interface (you have request server each time), second wont able achieve filtering may have noticed.

step step:

1. replace publication simple return jobs.find(); not place need filtering or enforce limit number of displayed items. means now, if add console.table(job.find().fetch()); available jobs display. make dropdown display categories need, using _.uniq advised use in your precedent question

2. you create session variable (or reactive variable using reactivevar) store current limit. initate in template rendered function, or in template created function: pagesession.set("limit", 4); , modify need in "load more" button click event.

3. you create function in client code in order enforce rules (limit displayed items number , categry filtering). let's call filterandlimitresults. helper use return displayed jobs become this:

   "displayedjobs": function() { return filterandlimitresults(job.find()); }

4. you don't need "moreresults" helper. rid of that. create event on click on more results button update reactivevar

   template.jobslist.events({ "click #showmoreresults": function(e, t) { e.preventdefault(); limit.set(limit.get()+4); },

5. you create session variable (or reactive variable using reactivevar) in order store selected category. initate in template rendered function, or in template created function: pagesession.set("chosencategory", ""); , modify need in dropdown items click event.

6. you need write filterandlimitresults. here 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 limit if (currentlimit ) {     filtered = _.first(filtered, currentlimit ); }  return filtered; }; 

and should go :-) results instantly , reactive.

ps: following same logic, should have no trouble filter cities and/or other field.