Aurelia、カスタム要素の長いバインディングリスト。リファクタリング？

Question

私はAPIから引き出されたJSONデータにバインドされたカードタイプのカスタム要素を繰り返しています。私の現在の方法は、これらのカードにデータを作成して表示する際にそれらのデータをバインドするものですが、そのすべてが "REFACTOR"を私に叫びます。 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> 

たぶん私は過度にNIT-うるさいされているんだけど、私は二回（基本的に）特に長いリストのバインディングが定義されている、少なくともに、よりコンパクトな方法を、この関係を定義することができるはずのように感じている場合。しかし、私はこれを達成するために他にどのように他のものがあるのか​​分かりません。

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もつともmlの

<!-- 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 
} 

その後、我々は、リファクタリングのために提示した初期のコードのように、オブジェクトのプロパティを直接アクセスすることができました。

これを達成する方法を見つける時間があれば、私は更新します。その間に、他の誰かがそれを行う方法を知っていれば、私は喜んでこれの答えとしてそれを受け入れるだろう。