Question

我是meteor js编程的新手，我的意图是从一个单选按钮形式中收集输入，以便在集合Answers中收到多个答案。现在的问题是，如果我点击提交按钮，我会在网址标签中看到答案值，但如果我在Chrome中打开控制台并输入数字Answers.find（）。fetch（），则集合中没有项目。

我的项目视图是：

<button onclick="document.getElementById('ip1').removeAttribute('disabled');document.getElementById('ip1').value='';">Click</button>

的客户机/ main.js

-project
--client
------main.js
------main.html
------main.css
--imports
---api
------answers.js
---ui
------body.js
------body.html
--server
------main.js

进口/ API / answer.js

import '../imports/api/answers.js';
import '../imports/ui/body.js';

进口/ UI / body.html

import { Mongo } from 'meteor/mongo';

Answers = new Mongo.Collection('answers');

Answers.allow({
    insert(){return false;},
    update(){return false;},
    remove(){return false;},
});

Answers.deny({
    insert(){return true;},
    update(){return true;},
    remove(){return true;},
});

进口/ UI / body.js

<body>
  <div class="container">
    <header>
      <h1>Questionnaire</h1>
    </header>
    {{> questionnaire}}
  </div>
</body>

<template name="questionnaire">
    <form> 
        {{#each questions}}
        <fieldset>
            <legend>{{qtitle}}</legend>
            <p>{{qtext}}</p>
            {{#each options}}
                <p><input type="radio" name="{{this.optqgroup}}" value="{{this.optvalue}}" required>  {{this.optxt}}</p>
            {{/each}}
        </fieldset>
        <br>
        {{/each}}

        <input type="submit" value="Submit your answers">
  </form>
</template>

服务器/ main.js

import { Template } from 'meteor/templating';

import './body.html';

Template.questionnaire.events({
    'submit form': function(event,template) {
        questions.forEach(function(question) { 
            let selected = event.target[question.optgroup].value;
            Meteor.call('insertAnswer', selected, (error)=> {
                if(error){
                    console.log(error);
                }
            })
        });
    }
});


Template.body.helpers({
questions : [
  { 
    qtitle: "1. Title Q1", 
    qtext: "Text Q1", 
    options:[
        {optgroup:"q1", 
         optvalue: "q1_opt1", 
         opttxt: "Option 1"},
        {optgroup:"q1", 
         optvalue: "q1_opt2", 
         opttxt: "Option 2"}]},
    {
    qtitle: "2. Title Q2", 
    qtext: "Text Q2",
    options:[
        {optgroup:"q2", 
         optvalue: "q2_opt1", 
         opttxt: "Option 1"},
        {optgroup:"q2", 
         optvalue: "q2_opt2", 
         opttxt: "Option 2"},]}]});

你能帮我解决这个问题吗？

Answer 1

好的，首先要做的事情..在提交事件中，您需要阻止默认的表单提交操作。

event.preventDefault();

否则您的浏览器只会对当前URL执行发布请求，并将表单数据作为请求正文，并使页面看起来更新。

要考虑的其他因素是您无法将模板助手作为模板事件中的变量进行访问。它们只能在模板的小胡子标签中使用，例如{{questions}}。帮助者也需要是函数。如果您需要从模板事件和模板助手访问您的问题数组，您可以将其声明为与模板助手/事件代码在同一文件中的变量，但不在其中，然后在事件中使用它或将其返回来自帮助者。

const questions = [
    {
        qtitle: '1. Title Q1',
        qtext: 'Text Q1',
        options: [{
                optgroup: 'q1',
                optvalue: 'q1_opt1',
                opttxt: 'Option 1'
            },
            {
                optgroup: 'q1',
                optvalue: 'q1_opt2',
                opttxt: 'Option 2'
            }
        ]
    },
    {
        qtitle: '2. Title Q2',
        qtext: 'Text Q2',
        options: [{
                optgroup: 'q2',
                optvalue: 'q2_opt1',
                opttxt: 'Option 1'
            },
            {
                optgroup: 'q2',
                optvalue: 'q2_opt2',
                opttxt: 'Option 2'
            }
        ]
    }
];

Template.questionnaire.events({
    'submit form': function(event,template) {
        event.preventDefault();
        questions.forEach(function(question) { 
            let selected = event.target[question.optgroup].value;
            Meteor.call('insertAnswer', selected, (error)=> {
                if(error){
                    console.log(error);
                }
            })
        });
    }
});

Template.body.helpers({
    questions() {
        return questions;
    }
});

Meteor Store输入集合

1 个答案: