我如何有條件地在aurelia模板中添加一個類

Question

我正在尋找一種方法將動態類添加到aurelia模板。如果特定的li是可見的，我必須添加一個活動類。

例

<section id="jobsCategoryContainer" class="jobsCategoryContainer"> 
    <h1>{{title}}</h1> 
    <div *ngFor = "#slide of jobCategorySlides; #i = index" id="job-category-slide_{{i}}" class="job-category-slide" [ngClass]="{active: initialCarouselIndex == i}"> 
     <ul *ngFor = "#item of slide"> 
      <li class="jobDetails" *ngFor="#job of item; #i = index"> 
       <div> 
        <span id="{{job.name}}" class="jobName">{{ job.name }}</span>  
       </div> 
       <div> 
        <span>{{job.noOfJobs}}</span> 
       </div> 
      </li> 
     </ul>  
    </div> 
    <div> 
     <a href="javascript:void(0)" (click)="updateJobsData($event ,false)" ng-value="Previous">Previous</a> 
     <a href="javascript:void(0)" (click)="updateJobsData($event ,true)" ng-value="Next">Next</a>  
    </div>  
</section> 

我要添加活動類下面的代碼

<div class="phs-widget-body"> 
         <div class="phs-carousel-inner"> 
          <ul repeat.for = "slide of nearByJobSlides" class="phs-item phs-grid-row" > 
           <li repeat.for = "item of slide" class="phs-small-6"> 
            <a href="javascript:void(0)"> 
             <div class="phs-job-title">${item.title}</div> 
             <div class="phs-job-info"> 
              <span class="phs-job-loacation">${item.location}</span> 
              <span class="phs-job-category">${item.category}</span> 
             </div> 
            </a> 
           </li> 
          </ul>        
         </div> 
        </div> 
        <div class="phs-widget-footer"> 
         <a class="left" href="#phsNearbyJobs" role="button" data-slide="prev"> 
          <i class="fa fa-angle-left"></i> Move to Previous 
         </a> 
         <ol class="phs-carousel-indicators"> 
          <li repeat.for = "slide of nearByJobSlides" data-target="#phsNearbyJobs" data-slide-to="${$index}" class="" click.trigger="changeActiveClass()"></li> 
         </ol> 
         <a class="right" href="#phsNearbyJobs" role="button" data-slide="next"> 
          Move to Next <i class="fa fa-angle-right"></i> 
         </a> 
        </div> 

除了我如何傳遞一個事件對象奧裏利亞？

Answer 1

只需使用插值

<div class="${ applyMyClass ? 'my-class' : '' }"> 

例如

<div class="${ carouselIndex == $index ? 'active' : '' }"> 

你並不需要一個點擊事件要做到這一點，它在這種情況下，我該如何處理它，當數據發生幻燈片一樣NG2（只有更少的代碼！）