Aurelia：对父自定义元素和子自定义元素中的属性使用共享类规范的问题

我有一个如下的代码，其中一个项目有一个时间表

我创建了一个名为TimelineProperties的类，该类充当我要从项目传递到子时间轴的属性的共享规范

我计划在项目自定义元素中使用TimelineProperties类，如下所示：

从“/timeline”导入{TimelineProperties}；
@customElement（'项目'）
出口类项目{
时间线：TimelineProperties=新的TimelineProperties（）；
}

...
...

我不知道您为什么要为此创建如此深入的类层次结构。这些类有一个或两个属性，所以我不知道继承树有什么好处。您正在编写TypeScript，因此使用这些东西的接口可能会更好

您的代码库中使用了多少其他位置的

TimelineProperties

？如果这是唯一的地方，那么实际上就没有真正的代码复制。代码重复是由于您坚持使用一堆类来不必要地使设计复杂化而造成的

如果我从您的示例代码中误读了这一点，我很抱歉，但我经常看到开发人员疯狂地使用继承，这样的想法会帮助他们避免重复自己，但最终DRY的好处被他们产生的解决方案的复杂性大大超过了

所以无论如何，假设确实需要在多个地方重用这些类，我建议使用decorator来实现这一点

例如：

timeline-props.js

timeline.js

timeline.html

${item}

app.html

---

这正是创建decorator所要处理的用例类型。

在创建问题时，我从示例中删除了很多代码，因此可能看起来设计过度。如果代码增长，我希望将它们组合成更易于理解的块（重构），这种父子独立数据组合（TimelineProperties）的目的是减少project.ts元素中的属性数量（project元素中的可读性更好，因为其中包含许多其他属性），同样，在这一步之后，Timeline元素中需要相同的属性，然后使用相同的类来实现这一点是正确的。。。。。。此外，DataLoading类在许多其他地方用于显示自定义元素的加载指示器，而该类似乎更适合于此。我在试图重构代码以使其更易于理解时偶然发现了这个问题。无论如何，从可读性和可维护性的角度来看，在当前代码中（在重构该部分代码之后），从我的角度来看，进行这种分离似乎更合理。在这种情况下，可绑定属性继承似乎对我很有效。但非常感谢你在这方面的投入。非常感谢您的快速反馈。可绑定属性继承可能工作得很好，但在Aurelia应用程序中使用继承存在一个大问题。当使用依赖注入时，继承变成了一种反模式，应该尽可能避免。因此，在“父扩展”中，如果该子类没有任何依赖注入（因为它只是一个POJO类），那么继承可以工作吗？另外，我还没有深入研究过继承PR代码（公开发行版），但你所创建的不是POJO。它是一个用属性装饰器装饰的POJO。为什么不通过绑定传递完整的TimelineProperties对象呢？我经常做这种事情，效果很好。（而不是绑定到单个属性。）我可以发布一个示例，这没有意义。@Vaccano如果我理解正确，您指的是：“@timelineBindings（new TimelineProperties（））”方法，然后迭代对象键以初始化绑定？如果是这样，那么我也在考虑这种方法，但是我丢失了typescript编译时检查，使用“Timeline Extendes Timeline properties”，我可以在Timeline类的方法中引用“list”和其他属性（来自扩展类），并进行编译时检查。如果您对“通过绑定传递完整的TimelineProperties对象”还有其他想法，我很高兴听到这些想法。有第三种方法可以解决这个问题——我刚刚发现了方法：使用装饰器添加可绑定的属性。我已经解释了它是如何工作的：

import {bindable} from 'aurelia-framework';

export function timelineProps() {
  return function(target) {
    bindable('list')(target);
  }
}

import {timelineProps} from 'timeline-props';

@timelineProps()
export class Timeline {

}

<template>
  <ul>
    <li repeat.for="item of list">
      ${item}
    </li>
  </ul>
</template>

<template>
  <require from="./timeline"></require>

  <timeline list.bind="items"></timeline>
</template>