Aurelia,自定义元素上的长长的可绑定列表。重构?
我有一个重复的卡型自定义元素绑定到从api拉出的JSON数据。我目前创建数据并将其绑定到这些卡片上的方法是有效的,但所有与它有关的信息都尖叫着“折叠”。 Aurelia有没有更好的方法来实现这些目标?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>
也许我过于挑剔的,但如果感觉我应该能够定义至少这种关系更紧凑的方式,特别是被定义的一长串绑定(本质)的两倍。但我不确定我还能如何实现这一目标,并且无法真正找到有关该主题/问题的更多信息。
您可以您刚才绑定的对象的类属性(就像我在
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
}
然后我们可以在提出了重构代码初始直接访问属性的对象,等等。
如果我有时间找到一种方法来完成此操作,我会更新。同时,如果其他人知道如何去做,我很乐意接受这个答案来代替这个。
使用with binding来更改子项的数据上下文。这样你就可以在你的card-commit.html, 中获得最小的重构,参见http://patrickwalters.net/aurelia-data-binding-strategies/ –
这些属性是否独立地改变,或者它们总是一次性改变为一个组? –
@AshleyGrant:如果我正确理解你的问题,他们会立即改变。上述绑定的目的主要是显示。但是,显示的重点是让用户独立更改某些属性并将其提交回API。 – DjH
如果它们全都改变,那么你可以只绑定一个单独的属性,它是具有所有这些属性的对象。然后当你需要改变所有的属性,只需绑定一个全新的对象。 –