Question

I’m having problems trying to make a reactive form. When I insert data into one collection, the other select is refreshed also. This happens with input fields also, everything gets cleared when I update one of the bound collections.

Is this supposed to happen?

My test code:

<template name="test">
  <form class="form-horizontal well" id="test-form">
    <select class="input-xlarge" name="item_id">
      {{#each types}}
        <option value="{{_id}}">{{name}}</option>
      {{/each}}
    </select>
    <select class="input-xlarge" name="category_id">
      {{#each categories}}
        <option value="{{_id}}">{{name}}</option>
      {{/each}}
    </select>
  </form>
</template>

And my helpers are:

Template.accounts.type = ->
  Types.find({}).fetch()

Template.accounts.categories = ->
  Categories.find({}).fetch()

Answer 1

I think this is a limitation of Meteor right now, hopefully it’ll be resolved in the future.

As discussed on irc, some ways to get around it:

1. Separate them into different templates
2. Wrap them in a helper that calls Meteor.ui.chunk.

3. Use a session variable to track the currently selected state. For example:

   Template.accounts.events = {
     'change #category_id': function() { 
        Session.set('selected_category_id', $(this).val());
     }
   }
   

(and code to initially select the value in Session.get('selected_category_id') if not undefined in the template).