Preview with meteor-autoform

Question

I use meteor-autoform with

{{> quickForm collection="Pages" id="insertPageForm" type="insert"}}

but I also want a box below the form with a preview area just like here on SO.

I just don't know how to bind a keyup trigger to the autoform field.

With a plain helper I could have html:

<textarea class="text"></textarea>
<div class="preview"></div>

and js:

"change .text": function (e) {
    $(".preview").text($(e.target).text());
}

or something like that.

Answer 1

If you to customize form using autoform then you have to use afQuickField (doc).

I tried with below code and I think this what you want.

common/schema.js

Pages = new Mongo.Collection("pages");

Pages.attachSchema(new SimpleSchema({
    text : {
        type: String,
        label: "Text",
        optional : true,
        max: 1000,
        autoform: {
            rows: 2
        }
    }
}));

.html

<template name="stest">
    {{#autoForm id="insertPageForm" collection="Pages" type='insert'}}
        {{> afQuickField name='text'}}
        <div class="preview"></div>
        <div>
            <button type="submit">Submit</button>
        </div>
    {{/autoForm}}
</template>

.js

Template.stest.events({
    "keyup textarea[name=text]": function (e, t) {
        t.$(".preview").text($(e.target).val());
    }
});

Hope this help you. Cheers!