使用流星预览-自动格式

Question

我用meteor-autoform和

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

但我也想要一个框下面的表格，与预览区域，就像这里这样。

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

有了简单的助手，我就可以拥有html：

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

和js：

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

或者类似的东西。

Answer 1

如果要使用autoform自定义表单，则必须使用afQuickField (文档)。

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

共同/模式

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

希望这能帮到你。干杯!