如何顯示汽車的詳細信息當點擊他們的名字

我正在用node.js製作一個網站，而我是新手，我想學習一種方法，如果有的話。我列出汽車使用ul，當我點擊一輛汽車名字我想顯示汽車的細節。我該怎麼做。如何顯示汽車的詳細信息當點擊他們的名字

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(); 
    } 
});

來源

2015-10-11 Ceyhun Tekin

我將接近使用這個問題。您可以使用指定click事件中的數據：

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); 
     }, 
});

會話是一個偉大而簡單的工具來管理用戶狀態，就像他們選擇的車輛一樣。

最後，你會那麼需要在這方面使用with可以導致更可讀的標記在模板中得到的值某處

<!-- 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}}

。但還有其他方法可以達到同樣的效果。

回顧一下，在高層次上，您將目標用戶與UI的交互作用設置爲全局變量，以簡化管理狀態。請務必在流星文檔中查看Session，它非常簡單而強大。（上面的代碼沒有經過測試，但希望傳達這個想法）

來源

2015-10-11 15:26:32 mason505

如何顯示汽車的詳細信息當點擊他們的名字

回答

相關問題