javascript - 使用meteor-autoform进行预览

Question

我使用meteor-autoform与

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

但我还想要在表单下方有一个带有预览区域的框，就像这里的那样。

我只是不知道如何将 keyup 触发器绑定(bind)到自动表单字段。

有了一个简单的助手，我就可以拥有 html:

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

和js:

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

或者类似的东西。

Answer 1

如果您使用自动表单自定义表单，则必须使用 afQuickField ( doc )。

我尝试使用下面的代码，我认为这就是你想要的。

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());
    }
});

希望这对您有帮助。 干杯!