1

我正在为 LOB 样式的 Aurelia 应用程序构建自定义数据网格框架，并且需要有关如何对主网格元素进行模板化的帮助，以便它可以从子列元素中获取自定义单元格模板进行渲染。

这是我到目前为止所做的：

网格示例.html

<data-grid items-source.bind="rowItems">                    
    <data-column property-name="Name" t="[displayName]fields_Name">
        <div class="flex -va-middle">
            <div class="user-avatar avatar-square">
                <img
                    if.bind="row.dataItem.avatarUri" 
                    src.bind="row.dataItem.avatarUri" />
            </div>

            <span class="name">${row.dataItem.name}</span>
        </div>
    </data-column>

    <data-column property-name="StatusText" t="[displayName]fields_Status">
        <span class="label ${row.statusClass}">${row.dataItem.statusText}</span>
    </data-column>

    <data-column property-name="Location" t="[displayName]fields_Location">
        <span>${row.dataItem.location}</span>
    </data-column>

    <data-column property-name="DateCreated" t="[displayName]fields_MemberSince">
        <span tool-tip.bind="row.dataItem.dateCreated | dateToString:'long-date-time'">
            ${row.dataItem.dateCreated | dateToString:'short-date'}
        </span>
    </data-column>   
</data-grid>

数据列.ts

import {
    autoinject,
    bindable,
    noView,
    processContent,
    ViewCompiler,
    ViewFactory } from "aurelia-framework";
import { DataGridCustomElement } from "./data-grid";

@autoinject
@noView
@processContent(false)
export class DataColumnCustomElement {
    @bindable
    propertyName: string;

    @bindable
    displayName: string;

    cellTemplate: ViewFactory;

    constructor(private readonly _element: Element,
                private readonly _dataGrid: DataGridCustomElement,
                private readonly _viewCompiler: ViewCompiler) {
        this.cellTemplate = this._viewCompiler.compile(`<template>${this._element.innerHTML}</template>`);
        this._dataGrid.columns.push(this);
    }
}

数据-grid.html

<template>
    <div class="table-wrapper -data-list -sticky-header">
        <table class="hover unstriped">
            <tbody>
                <tr class="labels">
                    <th repeat.for="column of columns">
                        <span>${column.displayName}</span>
                    </th>
                </tr>
                <tr repeat.for="row of itemsSource">
                    <td repeat.for="column of columns">
                        <!-- inject view for column.cellTemplate here? -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

数据网格.ts

import { autoinject, bindable } from "aurelia-framework";
import { DataColumnCustomElement } from "./data-column";

@autoinject
export class DataGridCustomElement {
    @bindable
    itemsSource: any[] = [];

    columns: DataColumnCustomElement[] = [];

    constructor(private readonly _element: Element) {
    }
}

data-column元素声明了一个单元格模板，该单元格模板被手动解析为一个实例ViewFactory- 我坚持的是如何为模板中相应td转发器中的每个数据列使用单元格模板data-grid，所以它的行为就像我直接声明了模板内容在那里。

这可能与默认repeat.for语法有关吗？还是我需要一个自定义模板控制器来执行此操作，它还可以接受 ViewFactory 实例作为范围内的可绑定参数？

如果有更好的方法来实现这一要求，那么我也对此持开放态度。

4

1 回答 1

1

您实际上是在尝试编译+渲染动态 html。这个特定于 or 表并没有什么特别之处repeat.for，但取决于您要实现的目标，这通常比简单地将 html 通过viewCompiler.

你可以在我写的插件中看到一个例子：https ://github.com/aurelia-contrib/aurelia-dynamic-html/

我可能会使用该插件（或者只是复制+粘贴代码并根据您的需要对其进行调整/优化），然后保持其余代码不变，执行以下操作：

数据列.ts

this.cellTemplate = this._element.innerHTML; // just assign the raw html

数据-grid.html

<tr repeat.for="row of itemsSource">
    <td repeat.for="column of columns"
        as-element="dynamic-html"
        html.bind="column.cellTemplate"
        context.bind="row[column.propertyName]">
    </td>
</tr>

无论如何，如果您只使用像这样或其他形式的自定义元素，您自己会更容易做到这一点。制作自己的中继器将非常困难；）

于 2018-07-09T05:15:23.553 回答