Meteor JS: list is populating with Collection results - meteor

Question

Here is my template:
<template name="list">
<div class="col-md-12">
{{#if jobsLoaded}}
<ul class="list-group" id="jobs">
{{#each jobs}}
<li>
<span class="pull-right">{{address}}</span>
<span id="jobTitle">{{{ jobUrl url title }}}</span>
<span id="company">{{company}}</span>
<span id="date"><em>{{dateacquired}}</em></span>
</li>
{{/each}}
</ul>
{{else}}
{{> spinner}}
{{/if}}
</div>
{{#if jobsLoaded}}
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
{{#if jobs}}
<select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
<option value="10">10 Per Page</option>
<option value="25">25 Per Page</option>
<option value="50">50 Per Page</option>
<option value="100">100 Per Page</option>
</select>
{{/if}}
</div>
<div class="col-md-10">
{{{pagination}}}
</div>
</div>
</div>
{{/if}}
</div>
</template>
Client Side JS:
Deps.autorun(function(){
Meteor.subscribe('cities');
Meteor.subscribe('jobs', Session.get('currentIndustryOnet'), function(){
Session.set('jobsLoaded', true);
});
});
Template.list.jobsLoaded = function () {
return Session.equals('jobsLoaded', true);
};
Template.list.rendered = function(){
var select = $('#perPage');
var option = select.attr('_val');
$('option[value="' + option + '"]').attr("selected", "selected");
select.selectpicker({
style: 'btn-info col-md-4',
menuStyle: 'dropdown-inverse'
});
}
Template.list.jobs = function() {
Deps.autorun(function(){
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
});
}
Server Side JS:
Meteor.publish('jobs', function(onet_code){
var cursor, options = {sort: {dateacquired: -1}};
console.log(onet_code);
if(onet_code){
cursor = Jobs.find({onet: onet_code}, options);
} else {
cursor = Jobs.find({}, options);
}
return cursor;
});
Meteor.publish('cities', function(){
return Cities.find({}, {sort: {pop: -1}, limit: 100});
});
For some reason when you load the page, the pagination appears, but the {{#each jobs}} isn't populated with the collection results.
Update:
Template.list.jobs = function() {
var options = {}, jobs;
if(Session.get('currentMapArea')) {
var c = Cities.findOne({_id: Session.get('currentMapArea')});
options.address = c.city.capitalize() + ", " + c.state;
}
if(Session.get('currentIndustryOnet')) {
options.onet = Session.get('currentIndustryOnet');
}
if($.isEmptyObject(options)) {
jobs = Jobs.find();
} else {
jobs = Jobs.find(options);
}
Session.set('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
}
Update 3:
Pagination:
Template.list.pagination = function() {
return Pagination.links('/jobs', Session.get('jobCount') || 1, {currentPage: Session.get('page') || 1, perPage: Session.get('perPage') || 10});
}
<template name="list">
<div class="col-md-12">
{{#if jobsReady}}
<ul class="list-group" id="jobs">
{{#each jobs}}
<li>
<span class="pull-right">{{address}}</span>
<span id="jobTitle">{{{ jobUrl url title }}}</span>
<span id="company">{{company}}</span>
<span id="date"><em>{{dateacquired}}</em></span>
</li>
{{/each}}
</ul>
{{else}}
{{> spinner}}
{{/if}}
</div>
{{#if jobsReady}}
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<select id="perPage" class="selectpicker select-block" _val="{{selected_opt}}">
<option value="10">10 Per Page</option>
<option value="25">25 Per Page</option>
<option value="50">50 Per Page</option>
<option value="100">100 Per Page</option>
</select>
</div>
<div class="col-md-10">
{{{pagination}}}
</div>
</div>
</div>
{{/if}}
</div>
</template>

Answer 1

I believe the problem is with this code -- it doesn't return anything:
Template.list.jobs = function() {
Deps.autorun(function(){
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count());
return Pagination.collection(jobs.fetch());
});
}
Think about what the return does. It return from the function in the Deps.autorun. The outer function returns nothing.
I think you can simply lose the Deps.autorun and do this, which should still be reactive:
Template.list.jobs = function() {
var jobs = Jobs.find();
if(Session.get('currentIndustryOnet')) {
jobs = Jobs.find({onet: Session.get('currentIndustryOnet')});
}
Session.get('jobCount', jobs.count()); // should this be a 'Session.set'?
return Pagination.collection(jobs.fetch());
}
Also note the question in the comment.