Question

在从下拉列表中选择字段后，我正在尝试显示查询中的数据。我不知道如何将选定的字段参数传递回main.htlm并使用它来列出项目。我正在阅读mongo集合中的下拉选项。选择一个值后，我想显示更多的mongo数据。

main.js

this.Assessment_data = new Mongo.Collection("assessments");
import { Template } from 'meteor/templating';

if (Meteor.isClient) {
    var selectValue;
    Template.list_data.all_items = function() {
        return Assessment_data.find().fetch();

    };

    Template.list_data.helpers({

        item: function() {
            return Assessment_data.find();
        }
    });


    Template.leadForm.events({
        'change select': function(event) {
            event.preventDefault();
            selectValue = event.target.value;
            console.log(selectValue);
        }
    });

    Template.leadForm.helpers({
        'categories': function(){
            assessments = Assessment_data.findOne();
            array = [];
            for (key in assessments) array.push(key);
            return array;
        }
    });

    Template.displayData.helpers({
        'field_item': function() {
            return Assessment_data.find();
        }
    });
}

main.html中

<head>
    <title>Assessment Data</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $("option").click(function(){
            $(this).hide(); 
        });
    </script>
</head>

<body>
    <h1>Assessment Data Testing Platform</h1>
    <div>
        {{> leadForm}}
    <!--    {{> list_data}}-->
    </div>

</body>

<template name="list_data">
    <ul>
        {{#each item}}
            <li>{{this.queried_ursi}}</li>
        {{/each}}
    </ul>
</template>

<template name="leadForm">
    <select>
        <option disabled="disabled" selected="selected">Select Assessment</option>
            {{#each categories}}
                <option value="{{this}}">{{this}}</option>
            {{/each}}
        {{> displayData}}
    </select>

</template>

<template name="displayData">
    <ul>
        {{#each field_item}}
            <li>{{this}}</li>
        {{/each}}
    </ul>
</template>

我尝试使用jquery。有任何想法吗？谢谢。

Answer 1

假设Assesment_data的架构是{key 1：'value1'，key2：'value2'}

帮助者：

 Template.leadForm.helpers({
        'categories': function(){
             //this will return an array of documents
            return Assessment_data.find().fetch();

        }
    });

Html：

 <template name="leadForm">
        <select>
            <option disabled="disabled" selected="selected">Select Assessment</option>
                {{#each categories}}
   <!-- this will fill in the data from the documents into the laceholders key1 and key2 which are the keys of the json object -->
                    <option value="{{key1}}">{{key2}}</option>
                {{/each}}
            {{> displayData}}
        </select>

 </template>

使用下拉选择

1 个答案: