哪种方法是在aurelia中编写可重用组件/ customElement的最佳方法？

问题描述

我需要创建多个具有相同html结构的表，但是每个表的数据和列都不同。因此，我想创建一个具有通用html结构并且可以获取列和数据作为参数的表组件，我不确定哪种方法是aurelia中执行此操作的最佳方法。

app.html

  <div class="wrapper">
    <div class="main-container">
      <header>heading</header>
     <compose view-model="./table-component" model.bind="items" inherit-binding-context></compose>
    </div>
  </div>

another-table.html

  <div class="wrapper">
    <div class="main-container">
      <header>heading 2</header>
     <compose view-model="./table-component" model.bind="items1" inherit-binding-context></compose>
    </div>
  </div>

table-component.js

export class TableComponent {
  constructor() {
    this.message = 'Hello world';
  }

  activate(model) {
    this.items = model;
  }

  getMoreFn(){
    this.parent.getMore(); // calling respective component api function
  }

  bind(bindingContext,overrideContext) {
    this.parent = overrideContext.parentOverrideContext.bindingContext;
  }

}

table-component.html

 <template>       
      <header id="level-one-head" class="level-one-header">
        <div></div>
        <div>No.</div>
        <div>Name</div>
        <div>Type</div>
      </header>
      <div class="level-data-section ">
        <div
          repeat.for="item of items"
          infinite-scroll-next="getMoreFn"
        >
          <div class="row">              
            <div>${$index}</div>
            <div>${item}</div>               
          </div>          
        </div>
      </div>
 </template>

1. 使用如上所述的compose并传递数据是正确的方法，还是有更好的方法来处理动态数据？
2. 计划根据表格在组合中也传递列标题

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）