Wie ich eine Klasse in Aurelia-Vorlage bedingt hinzufügen

Question

Ich bin auf der Suche nach einer Möglichkeit, eine Klasse dynamisch zu Aurelia Vorlage hinzuzufügen. Ich muss eine aktive Klasse hinzufügen, wenn das bestimmte li sichtbar ist.

Beispiel

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

Ich möchte die aktive Klasse auf unter Code

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

Neben hinzuzufügen, wie kann ich ein Ereignis Objekt auf aurelia passieren?

Answer 1

Verwenden Sie einfach Interpolation

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

Z.B.

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

Sie brauchen nicht diese mit einem Klick Ereignis zu tun, dann ist es das gleiche wie NG2 (nur weniger Code!)