Aurelia，自定義元素上的長長的可綁定列表。重構？

Question

我有一個重複的卡型自定義元素綁定到從api拉出的JSON數據。我目前創建數據並將其綁定到這些卡片上的方法是有效的，但所有與它有關的信息都尖叫着「摺疊」。 Aurelia有沒有更好的方法來實現這些目標？

我現在的自定義元素的圖案看起來像這樣

尋呼機view.html

<!-- Loop through the JSON task-data (each card contains the chosen task-data to display) --> 
    <template repeat.for="task of pageData[currentPage - 1]"> 

    <!--Bind each tasks data to a card as we loop--> 
    <card-commit 

     task-data.bind="task" 
     task-id.bind="task.ID" 
     task-name.bind="task.name" 
     project-id.bind="task.project.ID" 
     project-name.bind="task.project.name" 
     assigned-to.bind="task.assignedTo.name" 
     successors.bind="task.successors" 
     commit-status.bind="task.commitStatus" 
     planned-start-date.bind="task.plannedStartDate" 
     planned-comp-date.bind="task.plannedCompletionDate" 
     duration.bind="task.duration" 
     actual-start-date.bind="task.actualStartDate" 
     commit-date.bind="task.commitDate" 
     condition.bind="task.condition" 
     constraint.bind="task.taskConstraint" 
     constraint-date.bind="task.constraintDate" 
     status.bind="task.status" 
     note.bind="task.lastNote" 
     note-text.bind="task.lastNote.noteText" 
     note-entry-date.bind="task.lastNote.entryDate" 
     note-avatar-download-url.bind="task.lastNote.owner.avatarDownloadURL" 
     note-owner-name.bind="task.lastNote.owner.name" 
     actual-completion-date.bind="task.actualCompletionDate" 
    ></card-commit> 

    </template> 

卡commit.ts

import {bindable, inject} from 'aurelia-framework'; 

export class CardCommit { 
    @bindable public taskData; 
    @bindable public taskId; 
    @bindable public taskName; 
    @bindable public projectId; 
    @bindable public projectName; 
    @bindable public assignedTo; 
    @bindable public successors; 
    @bindable public commitStatus; 
    @bindable public plannedStartDate; 
    @bindable public plannedCompDate; 
    @bindable public duration; 
    @bindable public actualStartDate; 
    @bindable public actualStartDelta; 
    @bindable public commitDate; 
    @bindable public condition; 
    @bindable public conditionClass; 
    @bindable public conditionText; 
    @bindable public constraint; 
    @bindable public constraintDate; 
    @bindable public status; 
    @bindable public note; 
    @bindable public noteText; 
    @bindable public noteEntryDate; 
    @bindable public noteAvatarDownloadUrl; 
    @bindable public noteOwnerName; 
    @bindable public updateNoteText; 
    @bindable public actualCompletionDate; 

    constructor() { 
    // ... do constructor stuff 
    } 

    // ... other methods etc 
} 

卡commit.html

<!-- Do all sorts of stuff with the bound data, for example... --> 
<template> 
    <!-- This example wouldn't really work, just demonstrating how I'm using the bound data --> 
    <article data-task-id="${ taskId }"> 
    <ul repeat.bind="for example of task"> 
     <li data-example-commit="example.commitDate">${example.condition}</li> 
    </ul> 
    </article> 
</template> 

也許我過於挑剔的，但如果感覺我應該能夠定義至少這種關係更緊湊的方式，特別是被定義的一長串綁定（本質）的兩倍。但我不確定我還能如何實現這一目標，並且無法真正找到有關該主題/問題的更多信息。

Answer 1

• 您可以您剛纔綁定的對象的類屬性（就像我在pager-view.html與task-data.bind="task"一樣）

• 使用這個對象引用您可以直接在模板中想要的東西。

因此，修訂後的會是這樣的......

尋呼機view.html

<!-- Loop through the JSON task-data (each card contains the chosen task-data to display) --> 
    <template repeat.for="task of pageData[currentPage - 1]"> 

    <!--Bind each tasks data to a card as we loop--> 
    <card-commit 
     task-data.bind="task" 
    ></card-commit> 

    </template> 

卡commit.ts

import {bindable, inject} from 'aurelia-framework'; 

export class CardCommit { 
    @bindable public taskData; 

    constructor() { 
    // ... do constructor stuff 
    } 

    // ... other methods etc 
} 

card-commit.ht毫升

<!-- Now we reference the data that we want directly on the `taskData` attribute --> 
<!-- Do all sorts of stuff with the bound data, for example... --> 
<template> 
    <!-- This example wouldn't really work, just demonstrating how I'm using the bound data --> 
    <article data-task-id="${ taskData.taskId }"> 
    <ul repeat.bind="for example of taskData.task"> 
     <li data-example-commit="example.commitDate">${example.condition}</li> 
    </ul> 
    </article> 
</template> 

---

然而，（也許這是可能的，但我找不到它的任何引用），這將是真的高興能夠注入/傳遞taskData到在類的構造，有點像這樣...

尋呼機view.html

<!--Bind each tasks data to a card as we loop--> 
<card-commit 
    card-commit.constructor="task" 
></card-commit> 

然後能夠將它合併到類的構造函數中，可能是這樣的：

卡提交。TS

import {bindable, inject} from 'aurelia-framework'; 

export class CardCommit { 
    @bindable public taskData; 

    constructor(taskData) { 
    Object.entries(taskData).forEach(([key, val]) => { 
     Object.assign(this, {[key]: val}); 
    }); 
    } 

    // ... other methods etc 
} 

然後我們可以在提出了重構代碼初始直接訪問屬性的對象，等等。

如果我有時間找到一種方法來完成此操作，我會更新。同時，如果其他人知道如何去做，我很樂意接受這個答案來代替這個。