动态插入aurelia自定义元素

时间:2016-02-18 20:11:23

标签: aurelia aurelia-binding

的test.html

<gid>
  <grid-col prop1=""></grid-col>
  <grid-col-checkbox prop1=""></grid-col-checkbox>
  <grid-col-radio prop1=""></grid-col-radio>
  <grid-col-custom prop1=""></grid-col-custom>
</grid>

test.js 导出类测试{}

==============

grid.html

 <table>
   <tbody>
     <td>test</td>
      =======
       <template classs="foo-class" repeat="">

       </template>
       ======
    </tbody>
  </table>

grid.js       导出类Grid {}

我想在表格中插入以下内容。这样他们就会重复整个数据

 <grid-col prop1=""></grid-col>
 <grid-col-checkbox prop1=""></grid-col-checkbox>
 <grid-col-radio prop1=""></grid-col-radio>
 <grid-col-custom prop1=""></grid-col-custom>

任何人都可以帮助我们做到这一点吗?

1 个答案:

答案 0 :(得分:1)

您可以为表格行创建模板:

我的表列-template.html

<template>
    <td>
        <grid-col prop1=""></grid-col>
    </td>
    <td>
        <grid-col-checkbox prop1=""></grid-col-checkbox>
    </td>
    <td>
        <grid-col-radio prop1=""></grid-col-radio>
    </td>
    <td>
        <grid-col-custom prop1=""></grid-col-custom>
    </td>       
</template>

注意:如果<td></td>元素已经在grid-col-x组件中,则可以省略它们

然后只使用

<require from="my-table-row-template.html"></require>

<tr repeat.for="item of items">
   <my-table-row-template item.bind="item"></my-table-row-template>
</tr>

参考:http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.3/doc/article/cheat-sheet/4