Meteor Store输入集合-Java 学习之路

我是meteor 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
        });
    }
});

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

1 回答

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

event.preventDefault();

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

还需要考虑的是，你只能在模板的小胡子标签中使用't access your template helpers as variables inside your template events. They' ll，例如 {{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;
    }
});

回复于 2024-05-21T09:24:55+08:00

Meteor Store输入集合

1 回答

相关问题