Question

这是我的模板：

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

客户端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());
  });
}

服务器端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});
});

由于某些原因，当您加载页面时，会出现分页，但{{#each jobs}}未填充收集结果。

更新：

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

更新3： 分页：

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

我认为问题出在这个代码上 - 它没有返回任何内容：

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

考虑一下return的作用。它从Deps.autorun中的函数返回。外部函数什么都不返回。

我认为你可以简单地失去Deps.autorun并执行此操作，这应该仍然是被动的：

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

还要注意评论中的问题。

Meteor JS：列表填充了Collection结果

1 个答案: