Question

我想生成这样的行：

<tr repeat.for="item of block.columns.items">
   <td repeat.for="columnName of $parent.block.columns.displayed">
      ${$parent.block.columns.get(columnName).render(item)}
   </td>>
</tr>

我知道Aurelia只支持模板中的简单代码，但创建复杂的component或compose并不是一个好主意。

有人知道这个任务的优雅解决方案吗？

Answer 1

答案是：使用converters。感谢@EisenbergEffect详细解释转换器work

的方式

这是我的解决方案：

// column.js
export class Column {
    constructor(name) {
        this._name = name;
    }
    render(item) {
        return item[this._name];
    }
}

// servers.js
export class Servers {
    constructor() {
        this.items = [
            {id: "00001", name: "EX40-SSD", code: "art001", host: "55.99.44.77"},
            {id: "00003", name: "PX70-SSD", code: "md400084", host: "77.44.101.234"},
            {id: "00004", name: "Primary Balanced Server", code: "md-primary", host: "111.222.66.22"},
            {id: "00002", name: "ProServer Power X6", code: "triton832", host: "88.22.255.222"},
        ];

        this.columns = new Map();
        this.columns.set('code', new Column('code'));
        this.columns.set('name', new Column('name'));
        this.columns.set('host', new Column('host'));
    }
}

然后我创建自定义转换器render

// render.js
export class RenderValueConverter {
    toView(item, column) {
        return column.render(item);
    }
}

在视图中使用所有这些

// servers.html
<require from="./render"></require>
<tr repeat.for="item of items">
    <td repeat.for="[columnName, column] of $parent.columns">
        ${$parent.item | render:column}
    </td>>
</tr>

Answer 2

这就是我的工作 -

    <tr repeat.for="item of items">
      <td repeat.for="header of $parent.headers">
        ${$parent.item[header]}
      </td>
      <td>
    </tr>

到目前为止似乎做了我需要做的事。

在Aurelia模板中调用方法

2 个答案: