Question

我是Meteor的新手，我需要在下拉菜单中实现一个小的下拉菜单和所选数据的搜索。

我有devices.html：

<div class="ha_panel-selections">
    <form id="plane-form">
        <select id="plane-select">
            <option disabled="disabled" selected="selected">Please Select</option> 
            {{#each plane}}
                <option id="plane_selected" value="{{this}}">{{this.planeid}}</option>
            {{/each}}
        </select>
    </form>
</div>

数据来自数据库：devices.js是：

    Template.devices.helpers({
        plane: function() {
            return plane.find({});
        }
    });

现在我要做的是在下拉菜单中选择所选值（plane.planeid值），在db中搜索该值，并打印相关数据：例如，如果我选择＆＃34; plane1＆＃34;我可以看到飞行时间，飞行时间，飞行员名称，ecc;如果我改变了＆＃34; plane1＆＃34;到＆＃34; plane2＆＃34;数据会相应改变。

如何将plane_selected值从html传递给devices.js？然后，一旦我在数据库中找到数据，我如何打印从devices.js到devices.html的数据格式的结果？

我认为它应该（在devices.js中）像

Template.devices.events({
    "change #plane-form": function (event, template) {
        //console.log("event: " + util.inspect(event) );
        //console.log("template: " + util.inspect(template) );
        var selected = Session.get("plane_selected");
        console.log("selected: " + selected);
    }
});

我做错了什么？

Answer 1

考虑到您可以选择planeid，您的发布/发布似乎正在发挥作用。您所需要的只是另一个帮助，它可以为您提供飞机数据的其余部分。

<强> devices.js

Template.devices.events({
    "change #plane-select": function (event, template) {

        var selected = event.target.value;
        console.log("selected: " + selected);
        Session.set("selectedPlane", selected);
    }
});


Template.devices.helpers({
    plane: function() {
        return plane.find({});
    },

    planeData: function() {
        return planes.findOne({
            planeId: Session.get("selectedPlane")
        });
    }
});

<强> devices.html

<p>
planeID: {{planeData.planeid}}
planeName: {{planeData.planeName}}
...
...
</p>

注意：您可以在页面刷新时使用Session或reactive var个Session变量。

Meteor：使用下拉菜单从mongodb获取数据并显示结果

1 个答案: