流星存储集合中的输入答案

【问题标题】：Meteor Store input in a Collection流星存储集合中的输入
【发布时间】：2018-05-03 19:17:22
【问题描述】：

我是流星 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';

imports/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;},
});

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

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

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

【问题讨论】：

(a) 您是否删除了 autopublish 包，如果是，则 (b) 您的出版物和相应的订阅在哪里？

标签： javascript jquery meteor collections

【解决方案1】：

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

event.preventDefault();

否则，您的浏览器只会向当前 URL 执行一个 post 请求，其中表单数据作为请求的主体，并导致页面看似刷新。

另外需要考虑的是，您不能将模板助手作为模板事件中的变量进行访问。它们只能在模板的小胡子标签内使用，例如 {{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;
    }
});

【讨论】：