私は条件付きで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' : '' }"> 

を使用あなたはそれがNG2と同じですが、クリックイベントでこれを行う必要はありません

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

（だけ少ないコード！）