使用 meteor-autoform 预览

Question

我用meteor-autoform和

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

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

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

有了一个普通的帮手，我就可以 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());
    }
});

希望对您有所帮助。干杯！

使用 meteor-autoform 预览

Preview with meteor-autoform

javascript

node.js

meteor

meteor-autoform