在流星中动态地将textareas添加到表单中

时间:2015-11-13 13:48:33

标签: meteor

我想将textarea插入流星中的表单中。这是我目前的模板:

template(name="guide_create")
    .format-properly
        form.form-horizontal(id="guideForm" method="POST" action="/create-guide")
            .form-group
                label.col-sm-2.control-label(for="title") Title
                .col-sm-10
                    input.form-control(name="title" id="title")
            .form-group
                .col-sm-offset-2.col-sm-10
                    .checkbox
                        label
                            input(name="is_public" type="checkbox")
                            p Make your guide public
            .form-group
                label.col-sm-2.control-label(for="cards") Cards
                .col-sm-10
                    input.form-control(name="cards" id="cards")
        center
            button.btn.btn-primary#add-section(style="margin-bottom: 15px;") New Section
            each sections
                +section

template(name="section")
    textarea.new-section(type="text" uniqid=uniqid)
    button.remove-section Remove

第一个模板 guide_create 具有表单,第二个模板部分包含textarea。这就是我目前将textarea动态添加到页面的方式:

Template.guide_create.onCreated(function() {
  Session.set('sections', []); // on page load, set this to have no inputs
});     

Template.guide_create.events({
    'click #add-section': function () {
        var sections = Session.get('sections');
        var uniqid = Math.floor(Math.random() * 100000);
        sections.push({uniqid: uniqid});
        Session.set('sections', sections);
    }
});

Template.guide_create.helpers({
    sections: function () {
        return Session.get('sections'); // reactively watches the variable
    }   
}); 

我希望以某种方式可以实现这一点,我希望这些textarea现在包含在我的表单中,当我提交表单时,那些textarea的内容也会被提交。新创建的textarea目前不在表单中,我想更改它。任何帮助或建议都非常感谢!

1 个答案:

答案 0 :(得分:1)

我相信您的部分出现在您之外,因为它们被添加到表单组之外的模板中。尝试将它们移动到表单组中,就像这样?

        .form-group
            label.col-sm-2.control-label(for="cards") Cards
            .col-sm-10
                input.form-control(name="cards" id="cards")
                each sections
                +section
        center
            button.btn.btn-primary#add-section(style="margin-bottom: 15px;") New Section