在Meteor集合中查询afQuickField select的值失败。 为什么？

Question

Have I made a error in my code or have I found a bug in autoform or Meteor? I strongly believe this is my error but cannot find it.

In my Meteor application when querying a collection to provide values for a select input field in a form, the function run on the server returns a correctly populated array but an empty array when run on the client.

The application will track medical research subjects. I have collections for Studies and for study Sponsors. When creating or editing a study I want to enter a study sponsor from a list of existing sponsors. Autoform and simple-schema are used to create the create and edit forms. The select input for the study sponsor names is supplied with names in the schema for Studies as an Array given to 'allowedValues'. When allowedValues is given an explicit array all works as expected. However, when the array is supplied by a function

sponsorNames = function(){
  sn =  Sponsors.find().map(function(sp){ return sp.sponsorname });
  console.log(sn);
  return sn;
};

that collects the array values from the Sponsors collection the generated list is empty.

The console.log statement in the sponsorNames function prints the populated array to the cli where I am running the application. However, the browser console shows an empty array from the same console.log statement. I believe the code is running on both the server and on the client yielding two different results. In all other respects the code runs as it should.

An abbreviated application structure:

research
  both
    collections
      sponsors.js
      studies.js
    router
      routes.js
  client
    sponsor
      events.js
      helpers.js
      templates.html
    study
      events.js
      helpers.js
      templates.html
      subscribe.js
  server
    methods.js
    publish.js
    security.js

both/collections/sponsors.js

Sponsors = new Meteor.Collection('sponsors');

Schema.Sponsors =  new SimpleSchema({
  sponsorname: {
    type: String,
    label: 'Sponsor Name'
  },
});

Sponsors.attachSchema(Schema.Sponsors);

both/collections/studies.js

Studies = new Meteor.Collection('studies');

sponsorNames = function(){
  sn =  Sponsors.find().map(function(sp){ return sp.sponsorname });
  console.log(sn);
  return sn;
};

Schema.Studies =  new SimpleSchema({
  studyname: {
    type: String,
    label: 'Study Name'
  },
  sponsor: {
    type: String,
    label: 'Sponsor',
    allowedValues: sponsorNames(),
  },
  sitenum: {
    type: String,
    label: 'Site Number'
  },
});

Studies.attachSchema(Schema.Studies);

client/study/templates.js

<template name='editStudy'>
  {{#autoForm collection=studies id="updateStudyForm" type="update" doc=doc}}
    <fieldset>
      <legend>Edit a Study</legend>
      {{> studyPanel1}}
    </fieldset>
    <button type="submit" class="btn btn-primary">Update</button>
  {{/autoForm}}
</template>

<template name='studyPanel1'>
      {{> afQuickField name="studyname" class="form-control input"}}
      {{> afQuickField name="sponsor" class="form-control input" options='allowed' }}
      {{> afQuickField name="sitenum" class="form-control input"}}
</template>

client/study/helpers.js

Template.addStudy.helpers({
  studies: function(){
    return Studies;
  },
});

Template.editStudy.helpers({
  studies: function(){
    return Studies;
  },
  doc: function(){
    return this;
  }
});

client/study/events.js

var sponsorHooksObject = {
  after: {
    insert: function(error, result) {
      if (!error) {
        Router.go('sponsorsPage');
      };
    },
    update: function(error, result) {
      if (!error) {
        Router.go('sponsorsPage');
      };
    }
  },
};

AutoForm.hooks({
  insertSponsorForm: sponsorHooksObject,
  updateSponsorForm: sponsorHooksObject
});

client/subscribe.js

Meteor.subscribe('Subjects');
Meteor.subscribe('Studies');
Meteor.subscribe('Sponsors');

server/methods.js

Meteor.methods({
  'removeSubjectData': function(id){
    Subjects.remove(id);
  },

  'removeStudyData': function(id){
    Studies.remove(id);
  },

  'removeSponsorData': function(id){
    Sponsors.remove(id);
  },
});

server/publish.js

Meteor.publish('Subjects', function(){
  return Subjects.find({});
});

Meteor.publish('Studies', function(){
  return Studies.find({});
});

Meteor.publish('Sponsors', function(){
  return Sponsors.find({});
});

server/security.js

Subjects.permit(['insert', 'update', 'remove']).apply();

Studies.permit(['insert', 'update', 'remove']).apply();

Sponsors.permit(['insert', 'update', 'remove']).apply();

Meteor list:

accounts-password            1.1.1
alanning:roles               1.2.13
aldeed:autoform              5.3.2
aldeed:collection2           2.3.3
aldeed:simple-schema         1.3.3
aslagle:reactive-table       0.8.9
email                        1.0.6
fortawesome:fontawesome      4.3.0
ian:accounts-ui-bootstrap-3  1.2.71
iron:router                  1.0.9
meteor-platform              1.2.2
ongoworks:security           1.2.0
reactive-var                 1.0.5
twbs:bootstrap               3.3.5

Answer 1

I was simply going about this wrong. The query of the Sponsors collection for sponsorNames to populate the select field belongs in a template helper. With these changes the app works correctly.

both/collections/studies.js

Studies = new Meteor.Collection('studies');

// Remove these:
// sponsorNames = function(){
//   sn =  Sponsors.find().map(function(sp){ return sp.sponsorname });
//   console.log(sn);
//   return sn;
// };

Schema.Studies =  new SimpleSchema({
  studyname: {
    type: String,
    label: 'Study Name'
  },
  sponsor: {
    type: String,
    label: 'Sponsor',
    // Remove this:
    // allowedValues: sponsorNames(),
  },
  sitenum: {
    type: String,
    label: 'Site Number'
  },
});

Studies.attachSchema(Schema.Studies);

client/study/templates.js

<template name='editStudy'>
  {{#autoForm collection=studies id="updateStudyForm" type="update" doc=doc}}
    <fieldset>
      <legend>Edit a Study</legend>
      {{> studyPanel1}}
    </fieldset>
    <button type="submit" class="btn btn-primary">Update</button>
  {{/autoForm}}
</template>

<template name='studyPanel1'>
      {{> afQuickField name="studyname" class="form-control input"}}
      {{> afQuickField name="sponsor" class="form-control input"
                       type='select'  options=sponsorNames }}  <!-- Add this: -->
      {{> afQuickField name="sitenum" class="form-control input"}}
</template>

client/study/helpers.js

Template.addStudy.helpers({
  studies: function(){
    return Studies;
  },
});

Template.editStudy.helpers({
  studies: function(){
    return Studies;
  },
  doc: function(){
    return this;
  }
});

// Add this:
Template.registerHelper("sponsorNames", function() {
  return Sponsors.find().map(function(sp){
    return {label: sp.sponsorname, value: sp.sponsorname};
  });
});

Answer 2

You are correct that sponsorNames returns an empty array on the client, this is because the function is called before the subscription is ready. I wonder if you could do something like this instead (untested):

Studies = new Meteor.Collection('studies');

Tracker.autorun(function () {

    sn = Sponsors.find().map(function(sp){ return sp.sponsorname });

    Schema.Studies =  new SimpleSchema({
      studyname: {
        type: String,
        label: 'Study Name'
      },
      sponsor: {
        type: String,
        label: 'Sponsor',
        allowedValues: sn,
      },
      sitenum: {
        type: String,
        label: 'Site Number'
      },
    });

    Studies.attachSchema(Schema.Studies, { replace: true });

});

To explain:

Tracker.autorun will rerun the code every time any dependencies are invalidated. The dependency here is the Sponsors.find() query so once the subscription loads the result of Sponsors.find() will change and the tracker function will rerun.

Attaching the schema with replace:true will replace the entire schema each time, so allowedValues: [] will be replaced with the new array of sponsors.