集合中的流星存储输入

Question

我是流星js编程的新手，我的意图是从单选按钮的形式收集输入，以在集合Answers中收集多个答案。 现在的问题是，如果我单击“提交”按钮，我会在“ URL”选项卡中看到答案optvalue，但是如果我在Chrome中打开控制台，并在数字中输入Answers.find（）。fetch（），则集合中没有项目。

我的项目视图是：

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

客户端/ main.js

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

进口/api/answer.js

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.html

<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>

进口/ui/body.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"},]}]});

服务器/ main.js

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


Meteor.methods({
    insertAnswer(selected){
        Answers.insert({
                selected:selected
        });
    }
});

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

Answer 1

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

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

集合中的流星存储输入

问题描述

1 个解决方案

解决方案1
0 2017-11-22 02:47:40

集合中的流星存储输入

问题描述

1 个解决方案

解决方案1 0 2017-11-22 02:47:40

解决方案1
0 2017-11-22 02:47:40