Reactive variable to capture user input (Meteor)

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

Can I use a template system to retrieve data, rather than “embed” them as documented. That is, let's say I have a text area like

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

Is it possible to access the project description field as a source of reactive data? I did not get anywhere from Template.project.projectDescription to REPL, but as I said, I am new to this game.

If what I propose is impossible, what is an idiomatic approach? For example, where would I put my

 document.getElementById('desc').value 

Is the event map on the template the way it was done? The essence of this is, say, to verify that the input is unique (server issue) or to make mkdn on the fly (how it happens, RIGHT NOW when I type ...). But basically, I'm trying to feel the Meteor.

+6
source share
3 answers

Reactivity is only one way. However, you can register an event on a template to catch a keydown event, which could then set a session variable. Session variables are reactive data sources, so you can use the variable and template helper to create reactivity in another part of your 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; } }); 
+5
source

Meteor does not offer the type of two-way binding you might encounter in some frameworks. There may be smart packages 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); } }); 
+2
source

The session-bind package claims to do this: two-way binding of input to session variables. I am surprised that there are no other "reactive input packets" on the Atmosphere that do this.

0
source

Source: https://habr.com/ru/post/947608/


All Articles