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.

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.

• javascript
• meteor

3 Answers 3

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;
  }
});

Meteor doesn't offer the type of two-way binding you may have encountered in some frameworks. There may be smart packages out there to help with this, but the vanilla way is to bind events to DOM elements:

Template.xyz.events({
    "keyup #desc": function (evt, template) {
        Session.set("projectDescription", evt.currentTarget.value);
    }
});

The session-bind package claims to do just that: two-way input binding to session variables. I'm surprised there are no other "reactive input" packages on Atmosphere that do this.