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

Question

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

现在我想突出显示已选择(单击)的行。在我的 View 模型上，我有一个 Document[] 类型的文档属性，它保存网格中显示的所有文档，并且我有一个 Document 类型的 selectedDocument 属性，它应该保存最后选定的文档。这是在 setSelected 行上的单击事件中设置的。

我的观点如下:

<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;
   // })
}
}

正如您在 View html 中看到的那样，我在表行元素上设置了 class 属性:

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

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

所以我尝试了这个:

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

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

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

Answer 1

首先 - 使用 selectedDocumentChanged() 方法遇到的范围问题是因为您使用的是绑定(bind)引擎。如果您使用 observable 装饰器，如下所示，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'}"