I'm trying to work with forms, and just getting a grasp on JavaScript. Basically I'm unsure if there is a more reusable way to handle forms with Meteor/jQuery.

// Creating a new prayer, including the preview
    'click input.save' : function() {            
        var title = $("#prayer_title");
        var prayer = $("#prayer");
        var preview_container = $("#prayer_preview");
        var currentUser = Meteor.userId();

        if( currentUser !== null ) {
                title: title.val(), 
                prayer: prayer.val(),
                user: currentUser });

    // Auto-updating the preview
    'keyup #prayer' : function() {
        var preview_container = $("#prayer_preview");
        var preview_formatted = prayer.value.replace(/\n/g,'<br/>');

Is there a better way to do this, should my template be laid out in a different way?

<template name="newPrayer">
    <form id="new_prayer">
        <label for="prayer_title" class="item">Title</label>
        <input id="prayer_title" class="item" type="text" tabindex="1"/>

        <textarea id="prayer" class="item" name="prayer" tabindex="2" required="true" wrap="soft" autofocus="true" cols="60" rows="10"></textarea>
        <input type="button" class="save item" value="Save Prayer" tabindex="3" />
    <div id="prayer_preview">
        <p class="preview_text"></p>

Is there a better way to handle form data and form display, without having selectors for every form element, and then having to clear each one?

It seems like I'm not utilizing the full potential of Meteor's reactivity and templating features. Also open to any other pointers/tips with my code. The code works as is.

P.S. This code is just me learning Meteor/JS and the beginning of a small project.

  • \$\begingroup\$ I think you'll want to take a look at github.com/awatson1978/forms-kitchen-sink \$\endgroup\$ Feb 9, 2014 at 16:37
  • 1
    \$\begingroup\$ while this may not answer your question directly, I would advise people visiting this post to check out the autoForm package (github.com/aldeed/meteor-autoform) being dependent on the SimpleSchema package, it allows you to bind forms to model schemas in a declarative way, cutting down the repetitive form building work \$\endgroup\$
    – ChenR
    Jan 12, 2015 at 9:49

1 Answer 1


As far as I know, Meteor's reactivity is one-way: changes in data are reflected in the DOM. To go the other way (DOM to data) there's two common methods: 1) grabbing data directly from the DOM when it's needed (i.e. to save it) as you've done above and 2) binding DOM elements to data models, and using the data models for CRUD operations.

1 is simpler to implement, but 2 gives you more control over data-flow, subscriptions, and life-cycles. 2 has plenty of great libraries you can use, so you don't have to reinvent the wheel just to leverage these benefits. Backbone.js is probably the most well known plain-JavaScript library for this sort of thing (also check out Lo-Dash and Exoskeleton if you haven't), but the Meteor ecosystem may have a preferred library for this.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.