Easy way to link up input fields with reactive vars?


#1

Let’s say I have some input fields:

<input id="var1" data-capture>
<input id="var2" data-capture>

Then in the event map:

Template.page.events({
  'change input[data-capture]': function(event, template) {
    // store values in...something
  }
});

I know there’s probably a dozen ways to do this, but I want to store these as reactive variables. I suppose the easy/cheap way is to do Session.set(event.target.id, event.target.value). Is there a better way?


#2

This comes to mind too (I like this better than using Session):

Records = new Mongo.Collection(null);

...

Template.page.events({
  'change input[data-capture]': function(event, template) {
    Records.insert({
      varName: event.target.id,
      varValue: event.target.value
    });
  }
});

#3

It really depends on what you want to do with the stored variables. If they are to be used inside the template, you can do this:

Template.page.onCreated(function() {
  this.var1 = new ReactiveVar();
});

Template.page.events({
  'change input[data-capture]': function(event, template) {
    var var1 = ...
    template.var1.set(var1);
  }
});

#4

var1 was just an example, definitely didn’t want to hardcode it. The client-side collection solution above is working well.