javascript - Aurelia-更改表格中所选行的颜色

我在a.Net核心项目中使用带有Typescript的Aurelia v4.6.1。我有一个从外部源检索数据并使用repeat.for属性将其显示在表中的组件。

现在，我要突出显示已选中（单击）的行。在我的视图模型上，我有一个Document []类型的documents属性，该属性保存网格中显示的所有文档，而我有一个Document类型的selectedDocument属性，该属性应保存最后一个选定的文档。这是在setSelected行的click事件中设置的。

我的看法如下：

<template>
<require from="../../resources/valueconverters/itemIdFormat"></require>
<require from="./documentData.css"></require>
<h1>Patient Documents</h1>

<p>This component demonstrates fetching data from DME.</p>

<p if.bind="!documents"><em>Loading...</em></p>

<table if.bind="documents" class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Patient</th>
        </tr>
    </thead>
    <tbody>
        <tr repeat.for="document of documents" click.trigger="setSelected(document)" class="${($document.title == $selectedDocument.title) ? 'selected' : 'notSelected'}">
            <td>${ document.itemId | itemIdFormat }</td>
            <td>${ document.title }</td>
            <td>${ document.patient.lastName}, ${ document.patient.firstName }</td>
        </tr>
    </tbody>
</table>

我的ViewModel类是：

import { HttpClient } from 'aurelia-fetch-client';
import { BindingEngine, inject } from 'aurelia-framework';

@inject(HttpClient, BindingEngine)
export class DocumentData {
public documents: Document[];
public selectedDocument: Document;
public bindingEngine

constructor(http: HttpClient, bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.selectedDocument = null;
    let subscription = this.bindingEngine
        .propertyObserver(this, 'selectedDocument')
        .subscribe(this.selectedDocumentChanged);


    http.fetch('/api/Data/PatientDocuments')
        .then(result => result.json() as Promise<Document[]>)
        .then(data => {
            this.documents = data;
        });
}

setSelected(selected: Document) {
    this.selectedDocument = selected;
}

selectedDocumentChanged(newValue, oldValue) {
   // this.documents.forEach(function (d) {
   //     d.isCurrent = d === newValue;
   // })
}
}

如您在html视图中所看到的，我在表行元素上设置了class属性，其内容如下：

class="${($document.title == $selectedDocument.title) ? 'selected' : 'notSelected'}"

但是由于某种原因，它总是返回true，因此所有行都突出显示。

所以我尝试这样做：

class="${$document.isCurrent ? 'selected' : 'notSelected'}"

然后，我在selectedDocument属性上使用了绑定引擎订阅功能，将其设置为运行selectedDocumentChanged方法，并在更改selectedDocument属性时手动在列表中的每个文档上设置isCurrent属性。但是请注意，这已被注释掉。这是因为this变量不在订户更改方法的范围内，所以我不能使用它。

所以我有点卡住。突出显示所选行的正确方法是什么？我猜可能对每行重复使用嵌套组件是可能的，但是我希望能够在此组件中实现所有这些功能。

最佳答案

首先-使用selectedDocumentChanged()方法遇到的范围问题是因为您正在使用绑定引擎。如果使用如下所示的可观察装饰器，则this将不再超出范围；

import {observable} from "aurelia-framework";

export class DocumentData {

    @observable selectedDocument;

    // Your other code

    selectedDocumentChanged(newVal, oldVal) {
        this.documents.forEach(function (d) { // no longer out of scope
            d.isCurrent = d === newValue;
        })
    }
}

其次-在模板中，您不需要为属性添加$前缀。仅在要在模板中使用字符串插值时使用。如果要遍历或比较属性，则可以正常使用它们。例如;

class="${document.isCurrent ? 'selected' : 'notSelected'}"

要么;

class="${(document.title == selectedDocument.title) ? 'selected' : 'notSelected'}"

关于javascript - Aurelia-更改表格中所选行的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44159383/