Question

我正在制作一个带有node.js的网站，我是新手，如果有的话，我想学习一种方法。我使用ul列出汽车，当我点击汽车名称时，我想展示汽车＆＃ 39;细节。我怎么能这样做。

HTML

<template name="vehicles">
<section id="vehicles" class="container">
    <div class="row">
        <div class="col-md-12">
            <h2 class="title wow fadeInDown" data-wow-offset="200">Vehicle Models - <span class="subtitle">Our rental fleet at a glance</span></h2>
        </div>

        <!-- Vehicle nav start -->
        <div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
            <div id="vehicle-nav-container">
                <ul class="vehicle-nav">
                    {{#each showcarnames}}
                    <li class="active"><a href="#vehicle-1">{{aracmarka}}</a><span class="active">&nbsp;</span></li>
                 {{/each}}
                </ul>
            </div>

            <div class="vehicle-nav-control">
                <a class="vehicle-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
                <a class="vehicle-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a>
            </div>

        </div>
        <!-- Vehicle nav end -->

        <!-- Vehicle 1 data start -->
        <div class="vehicle-data" id="vehicle-1">
            <div class="col-md-6 wow fadeIn" data-wow-offset="100">
                <div class="vehicle-img">
                    <img class="img-responsive" src="img/vehicle1.jpg" alt="Vehicle">
                </div>
            </div>
            <div class="col-md-3 wow fadeInUp" data-wow-offset="200">
                <div class="vehicle-price">$ 37.40 <span class="info">rent per day</span></div>
                <table class="table vehicle-features">

                    <tr>
                        <td>Marka</td>
                        <td>{{carmark}}</td>
                    </tr>
                    <tr>
                        <td>Model</td>
                        <td>{{carmodel}}</td>
                    </tr>



                </table>
                <a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Reserve now</a>
            </div>
        </div>

JS

 Template.vehicles.helpers({
    showcarnames: function() {
      return cars.find();
    }
});

Answer 1

我会使用Session来解决这个问题。您可以使用点击事件来定位数据：

Template.vehicles.events({
    'click .vehicle-nav li': function(){
        Session.set('selected-vehicle', this._id); // or however you id the docs in your app.
     }
});

然后创建一个事件助手，获取所选文档并将其返回给模板。

Template.vehicles.helpers({
        getSelectedVehicle: function() {
            var selectedId = Session.get('selected-vehicle');
            return cars.findOne(selectedId);
        },
});

会话是管理用户状态的一个非常简单的工具，就像他们选择的车辆一样。

最后，您需要在模板中获取值

<!-- html-->
{{#if getSelectedVehicle}}
    {{#with getSelectedVehicle}}
      <!-- mark up, when using with you can access doc atts directly. -->
    {{/with}}
{{else}}
    <!-- tell the user to make a selection -->
{{/if}}

在此上下文中使用with可以获得更具可读性的标记。但是还有其他方法可以达到相同的效果。

回顾一下，在高层次上，您将目标用户与UI进行交互，将全局变量设置为简化管理状态的方法。请务必查看流星文档中的Session，它非常简单而且功能强大。（上面的代码没有经过测试，但希望传达这个想法）

如何显示汽车的详细信息点击他们的名字

1 个答案: