如何在 Aurelia 的点击事件中添加类？答案

【问题标题】：How to add class on click event in Aurelia?如何在 Aurelia 的点击事件中添加类？
【发布时间】：2019-04-03 15:36:42
【问题描述】：

我是 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));
  }

【问题讨论】：

请发布您的代码，以便我们查看您当前的代码是什么样的。

标签： css aurelia

【解决方案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

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

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

【讨论】：