javascript - Aurelia模板中的调用方法

我想生成这样的行：

<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不是一个好主意。

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

最佳答案

答案是：使用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>

关于javascript - Aurelia模板中的调用方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31818973/