Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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
Template.newPrayer.events({
    'click input.save' : function() {            
        var title = $("#prayer_title");
        var prayer = $("#prayer");
        var preview_container = $("#prayer_preview");
        var currentUser = Meteor.userId();

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

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

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

<template name="newPrayer">
    <h1>{{title}}</h1>
    <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" />
    </form>
    <div id="prayer_preview">
        <h2>Preview</h2>
        <p class="preview_text"></p>
    </div> 
</template>

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.

share|improve this question
    
I think you'll want to take a look at github.com/awatson1978/forms-kitchen-sink –  Serkan Durusoy Feb 9 at 16:37
add comment

1 Answer

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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