Learn Two Way Data Binding in Meteor

with meteortube

Wg608rhitponck8ftu9a?cache=true

The Problem: You want Two-Way Data Binding in MeteorJS

You have a form input and you want to print the results of the user’s input after every keyup. You may also want to run a function after every keyup and have the result updated in template.

The Meteor App we are Building

This can be useful feature for printing the results of user input in real time. Imagine you have an app that calculates the value of circumference of a circle for a given radius. Rather than having the user click submit after they enter the number, we can just update result in realtime.

Sidenote: If you have ever worked AngularJS, you should know that two-way binding like this works between your models and views. Google "circumference of circle" and you should see the search engine’s demo that does the same thing. This lesson is just replicating that same behavior in Meteor.

Resources

Example App: Meteor Circle Circumference Calculator

269sjmjnquomkl45qf9s
Notice that after every keyup event, the value of the circumference changes. Also, I am console logging the each event object.

Storing the User Input in a Session

The Session in meteor is really simple. It allows you to store and fetch data that disappears when the session ends, such as a page refresh.

We can create two-way binding on the keyup event storing the user’s input in the meteor’s Session. When we define an event, Meteor creates an event object when it occurs from which we can get all the data we need. Here’s how it will work.

  1. A user enters something into our form.
  2. Meteor creates the event object.
  3. We set the user’s input to a Session variable.

calculator.html

 <template name="calculator">
  <input class="user-input">
</template>

calculator.js

Template.calculator.events({
  "keyup .user-input": function(event) {
    var radiusValue = event.target.value;
    Session.set('userInput', radiusValue);
  }
});

The code above creates a form input with the class of "user-input". We then bind this input to the keyup event and grab the target value from the event object that Meteor creates for us. Lastly, we set a Session variable with this value.

Calculating the Circumference with Pi

Now we need to run the calculation and update the value in the template. Remember how to calculate the circumference of a circle from high school geometry?

C = 2πr (Circumference equals 2 times Pi times radius)

We can use this formula in a template helper in meteor. Simply get the value of the Session variable, then calculate it with circumference formula. Notice that the value of circumference defined in the helper method can be called in our template with double curly braces, i.e. {{circumference}}. It will be automatically recalculated and updated in the template after every keyup event.

calculator.js

Template.calculator.helpers({
  circumference: function(){
    var userInput = Session.get('userInput');
    return ( (2 * Math.PI) * userInput );
  }
});

calculator.html

 <input class="user-input">
  {{circumference}}

If you try it out in the browser, you should see the value change in real time.

Counting Characters Allowed in a Form

Another useful client-side feature is to count the remaining characters in a form before it fails validation. The most famous use of this is the 140 max tweet validation you get from Twitter. Following the same techniques in the examples used above, we can keep track of the characters remaining.

This time, we will call the length method on the event value before adding it to the Session. Then we will subtract it from our arbitrary max value, let’s stick with 140.

demo.html

<template name="demo">

  <input class="text-form">
  {{remainingCharacters}} of 140 Characters Remaining

</template>

demo.js

Template.demo.events({
  "keyup .text-form": function(event) {
    var textLength = event.target.value.length;
    Session.set('charactersEntered', textLength);
  }
});

Template.demo.helpers({
  remainingCharacters: function(){
    var maxCharacters = 140;
    var charactersEntered = Session.get('charactersEntered');
    return maxCharacters - charactersEntered;
  }
});

Pretty cool, but let’s add one last touch. When the user approaches the character limit, lets change the text color to orange, then red when they pass the max.

Changing Text Color to Red or Orange when Reaching the Character Limit

This Section is Locked!

Unlock this lesson for free to view all sections.

Signup and Unlock for free

Grades

Nobody has graded this lesson yet.

n 0.0%
Technology Code

  • 6 Unlocks
  • 558 Total Reads
  • 24 minutes Est. Learning Time