Realtime Reactive Form with Meteor JS
I started to study Meteor and there are a few initial concepts that I still don't understand.
In Ember / Handlebars I can write something like this
<script type="text/x-handlebars">
{{input type="text" value=name}}
Hello, {{name}}
</script>
And whenever the user types something in the input field, it will be displayed in real time.
How to achieve the same in Meteor? I tried this
<div>
<input type="text" value="{{name}}">
Hello, {{name}}
</div>
But it doesn't work. Do I need to explicitly record the Meteor event for this?
source to share
To clarify Pauls answer, yes, you need to define an event. Also the template needs to know where to get the value for name
. Here's a more meticulous example:
<template name="hello">
<div>
<input type="text" value="{{name}}">
Hello, {{name}}
</div>
</template>
and
if (Meteor.isClient) {
Session.setDefault("name", "world");
Template.hello.helpers({
name: function () {
return Session.get("name");
}
});
Template.hello.events({
'keyup input': function (event) {
Session.set("name", event.target.value);
}
});
}
Live example: http://meteorpad.com/pad/TsHu27WASi6KdqaA6
source to share
I know this later, but to complete Jeffrey's answer:
It is actually recommended that you use the scope of ReactiveVar or ReactiveDict when working with non-global variables such as form data.
Assuming this pattern:
<template name="form">
<form>
<input id="firstName" type="text" value="">
<input id="lastName" type="text" value="">
<p>Hello, {{fullName}}</p>
</form>
</template>
As you can see, I don't set the input value directly in the template to avoid endless loops with the event onChange
.
C ReactiveVar
:
first run meteor add reactive-var
in your terminal at the root of the project and then:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
Template.form.onCreated(function() {
this.form = new ReactiveVar({
firstName : '',
lastName : ''
});
});
Template.form.helpers({
fullName : () => {
let form = Template.instance().form.get();
return `${form.firstName} ${form.lastName.toUpperCase()}`;
}
});
Template.form.events({
'keyup #firstName, change #firstName'( event ) {
let form = Template.instance().form;
form.set(Object.assign(form.get(), { firstName : event.currentTarget.value }));
},
'keyup #lastName, change #lastName'( event ) {
let form = Template.instance().form;
form.set(Object.assign(form.get(), { lastName : event.currentTarget.value }));
}
});
C ReactiveDict
:
first run meteor add reactive-dict
in your terminal at the root of the project and then:
import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';
Template.form.onCreated(function() {
this.form = new ReactiveDict();
this.form.set('firstName','');
this.form.set('lastName','');
});
Template.form.helpers({
fullName : () => {
let form = Template.instance().form;
return `${form.get('firstName')} ${form.get('lastName').toUpperCase()}`;
}
});
Template.form.events({
'keyup #firstName, change #firstName'( event ) {
Template.instance().form.set('firstName', event.currentTarget.value);
},
'keyup #lastName, change #lastName'( event ) {
Template.instance().form.set('lastName', event.currentTarget.value);
}
});
source to share