使用下拉选择显示流星中的字段数据答案

【问题标题】：Displaying field data in meteor with dropdown selection使用下拉选择显示流星中的字段数据
【发布时间】：2018-09-13 03:56:57
【问题描述】：

我试图在从下拉列表中选择字段后显示来自查询的数据。我不确定如何将所选字段参数传递回 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。有任何想法吗？谢谢。

【问题讨论】：

标签： javascript jquery mongodb meteor meteor-blaze

【解决方案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>

【讨论】：