1

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

应用程序.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>

另一个-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>

表组件.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;
  }

}

表组件.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. 计划根据表格在组合中传递列标题
4

0 回答 0