使用流星自动预览

Question

我用meteor-autoform

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

但我也想在表格下方有一个带有预览区域的框，就像这里的SO一样。

我只是不知道如何将keyup触发器绑定到autoform字段。

有了一个简单的帮手，我可以使用html：

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

和js：

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

或类似的东西。

Answer 1

如果要使用自动表单自定义表单，则必须使用afQuickField （ doc ）。

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

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

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