如何在Aurelia中的click事件上添加类？

Question

我是aurelia的新手。我正在寻找找到在单击事件上添加类的最佳方法。

我只想单击批准或请求信息，然后将一个类添加到相应的“联系卡”。此类将更改背景颜色。

我知道这可能很简单，但我想我会在这里寻找最佳方法。

这是我所拥有的图像：

抱歉，工作有点忙。

这是我第一次在S.O.上发帖，对于未能达到的任何期望我深表歉意。

  <div class="col-sm-4">
        <button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
          approve contact
        </button>
          </div>

          <div class="col-sm-4">
              <button class="btn btn col-sm-12" click.delegate="requestContact()">
                request information
              </button>
          </div>
        </div>

要更改的元素被命名为“ list-group-item”，其中包含 联系人的详细信息（上面显示的代码）。

<template>
<div class="contact-list">
   <ul class="list-group">
     <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
       <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
         <h4>${contact.firstName} ${contact.lastName}</h4>
         <p>${contact.company}</p>
         <p>${contact.email}</p>
         <h6>${contact.approval}</h6>
       </a>
       <a route-href="route: contacts; params.bind: {id:contact.id}">
          <p>${contact.phoneNumber}</p>
       </a>
     </li>
   </ul>
 </div>

goodBoi() {
    let result = confirm("Are you sure you want to confirm this contact?");
    if (result === true) {
      var standingShell = document.getElementsByClassName("list-group-item");
      //im hoping here I would add a class to the new variable//
      this.contact.approval = 'approved';
      this.save();

    }


  }
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
  requestContact() {
    let contactRequestText = "request sent to contact";
    this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
    this.ea.publish(new ContactUpdated(this.contact));
  }

Answer 1

有许多方法可以使用Aurelia设置CSS类。接下来，我准备了一个示例要点：

模板：

<template>
  <h1>${message}</h1>

  <div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">

  </div>
  <div class="form-group">
    <button click.delegate="save()">
      Click me
    </button>
  </div>

</template>

和代码类：

@autoinject
export class App { 
  @bindable clicked = false;

  save(){
   this.clicked = true; 
  }
}

https://gist.run/?id=425993b04a977466fa685758389aa2b4

但是还有其他更清洁的方法：

• 在ref中使用custom element。
• custom attributes。
• 包括jQuery以使用例如$('#myelement').addClass()