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 
} 

然后我们可以在提出了重构代码初始直接访问属性的对象，等等。

如果我有时间找到一种方法来完成此操作，我会更新。同时，如果其他人知道如何去做，我很乐意接受这个答案来代替这个。