Question

我有一个重复的卡片式自定义元素，它绑定到从api中提取的JSON数据。我目前在显示这些卡片时创建数据并将其绑定到这些卡片的方法很有效，但是关于它的所有内容都会让人感到震惊。＃34; REFACTOR＆＃34;对我来说。 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

您可以将对象绑定到类属性（就像我在task-data.bind="task"中使用pager-view.html所做的那样）
使用此对象直接在模板中引用您想要的内容。

如此修改将是这样的......

<强>寻呼机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
}

<强>卡commit.html

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

然而，（也许这是可能的，但我找不到任何引用），能够注入/传递{{1} 真的很好到类构造函数，有点像......

<强>寻呼机view.html

taskData

然后能够在类的构造函数中合并它，可能是这样的：

<强>卡commit.ts

 <card-commit card-commit.constructor="task" ></card-commit>

然后我们可以直接在对象上访问属性，就像为重构提供的初始代码一样。

如果我有时间找到完成此任务的方法，我会更新。与此同时，如果有其他人知道该怎么做，我很乐意接受这个作为代替的答案。

Aurelia，自定义元素上的可绑定列表。重构？

1 个答案: