aurelia - 我如何有条件地在 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>

以及如何在 aurelia 上传递事件对象？

Answer 1

只需使用插值

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

例如。

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

你不需要用点击事件来做这件事，它和 ng2 一样(只是代码更少!)