Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

reactive variable to capture user input (Meteor)

I'm still trying to wrap my head around the reactive programming model in Meteor, so this is probably a silly question, but:

Can I use the template system to extract data, rather than "inject" it, as is documented. That is, say I have a textarea like so

     <textarea id="desc" rows="15" cols="80" >  {{projectDescription}} </textarea>

Is it then possible to have access to the projectDescription field as a reactive data source, as it were? I didn't get anywhere with Template.project.projectDescription at the REPL, but as I say, I'm new to this game.

If what I propose is impossible, what's the idiomatic approach? Like, where would I put my

document.getElementById('desc').value

Is an event map on the template the way this was designed to be done? The point of this is to, say, validate that an input is unique (a server question) or do on-the-fly mkdn (like is happening RIGHT NOW as I type...). But mostly, I'm trying to get a feel for Meteor.

like image 306
Ben Avatar asked Jun 19 '13 01:06

Ben


1 Answers

Reactivity is only one way, You can however register an event on the template to catch the keydown event which could then set a session variable. Session variables are reactive data sources so you could then use the variable and a template helper to create your reactivity in another part of you template.

As an example:

<template name="project>
  <textarea id="desc"></textarea>
  <div>{{projectDescription}}</div>
</template>

-

Template.project.events({
  "keydown #desc": function (event) {
     var value = $(event.target).val();
     Session.set("projectDescription", value);
  }
});

Template.project.helpers({
  projectDescription: function () {
    var projectDescription = Session.get("projectDescription");
    //do processing
    return projectDescription;
  }
});
like image 90
Kelly Copley Avatar answered Sep 22 '22 01:09

Kelly Copley