How can I make Meteor subscriptions dynamic?

Question

I am looking to make my meteor subscriptions dynamic/reactive. Right now, I have a page that subscribes to a collection of templates based on a template ID that is assed to it:

Meteor.subscribe('templates', templateId)

On the same page, I have a dropdown list of template names and ID's:

    <p><label>Select Template</label></p>
    <select id="templateSelect" name="templateSelect">
        <option disabled selected> Select Template </option>
        {{#each orderTemplates}}
            <option value="{{this._id}}">{{this.templateName}}</option>
        {{/each}}
    </select>

I want the subscription variable templateId to be equal to the option value of the template that I select. Anyone have any ideas? I'm really not sure where to begin with this one...

Thanks!

Do you want a global or a template-level subscription? I.e. should the subscription to stop once you navigate to a new route/template? — David Weldon, Aug 25 '15 at 05:41

score 4 · Accepted Answer · answered Aug 25 '15 at 17:31

If you want a template subscription, you should follow this strategy:

Create a reactive variable scoped to your template.
Update (1) in your event handler.
Use a template subscription combined with a template autorun - this will ensure you have only one outstanding subscription and will automatically clean up the subscriptions when the template is destroyed.

Template.myTemplate.events({
  'change #templateSelect': function (event, template) {
    // extract the value/id from the selected option
    var value = $(event.target).val();

    // update the templateId - whis will cause the autorun to execute again
    template.templateId.set(value);
  }
});


Template.myTemplate.onCreated(function() {
  var self = this;

  // store the currently selected template id as a reactive variable
  var templateId = new ReactiveVar;

  // this will rerun whenever templateId changes
  this.autorun(function() {
    // Subscribe for the current templateId (only if one is selected). Note this
    // will automatically clean up any previously subscribed data and it will
    // also stop all subscriptions when this template is destroyed.
    if (templateId.get())
      self.subscribe('orderTemplateShow', templateId.get());
  });
});

Recommended reading:

You're a true lifesaver!! – Trung Tran Aug 25 '15 at 22:34 — Trung Tran, Aug 25 '15 at 22:34

score 2 · Answer 2 · answered Aug 25 '15 at 05:01

2

To get the id of the selected option use a jQuery selector to select by id then select .val() of that menu:

var templateId = $('select[id="templateSelect"]').val();
Meteor.subscribe('templates', templateId);

answered Aug 25 '15 at 05:01

Michel Floyd

18,793
4
24
39

gotcha, i didn't realize I could use the subscription method in a template helper file.. – Trung Tran Aug 25 '15 at 13:08
I'd recommend putting it in your template event handler rather than a helper in this case since you are reacting to a menu selection. – Michel Floyd Aug 25 '15 at 15:47

How can I make Meteor subscriptions dynamic?

2 Answers2

Linked