在Aurelia中，模板可以与自定义属性一起使用吗？

Question

尝试Aurelia特性，我想创建一个简单的自定义属性，该属性根据与属性关联的模板将内容注入定义属性的元素中。到目前为止，我只是为自定义属性创建了视图和视图模型，并使用属性对元素进行了注释。如何呈现与自定义属性关联的模板。任何链接或信息将不胜感激。

在Charleh的链接之后，我尝试实现它，尽管视图呈现，但它并不绑定我的项。这是代码，也许有人能发现出什么问题了

ctest.ts

import { inject, dynamicOptions, Container, customAttribute, bindable} from "aurelia-framework";
import {ViewEngine} from 'aurelia-templating';

@dynamicOptions
@customAttribute("my-test")
@inject(Element, Container, ViewEngine)
export class MyTestCustomAttribute { // extends Paging {

    constructor(private element: any,
        private container: Container,
        private viewEngine: ViewEngine) {

        this.element = element;
    }

    @bindable items = new Array<number>();

    @bindable totalItems: any;

    attached() {

        for (let i = 0; i < this.totalItems; i++) {
            this.items.push(i);
        }

        this.viewEngine.loadViewFactory('components/ctest/ctest.html').then(factory => {
            const childContainer = this.container.createChild();
            const view = factory.create(childContainer);
            view.bind(this);
        });
    }

    propertyChanged(name, newValue, oldValue) {
        switch (name) {
            case 'totalItems':
                alert("totalItems changed");
                break;
            case 'items':
                alert("items changed");
                break;
            default:
                break;
        }
    }
}

ctest.html

<template>
    hello from my-test
    <ul>
        <li repeat.for="item of items">
            ${item}
        </li>
    </ul>
</template>

和使用

也试过

<div my-test="totalItems.bind:5"></div>

无论如何，this.totalItems总是未定义的。

更新

每个约定绑定pascal大小写属性名称的正确语法是使用"-“，所以这是正确的。

<div my-test="total-items:5"></div>

Answer 1

这就是我最后所做的，到目前为止似乎还不错。

public attached(): void {

    this.viewEngine.loadViewFactory('components/pagination/PaginationCustomAttribute.html').then(factory => {

        const childContainer = this.container.createChild();
        const view = factory.create(childContainer);

        view.bind(this);

        this.totalPages = this.calculateTotalPages();
        this.updatePage();

        const vs = new ViewSlot(this.element, true);
        vs.add(view);
    });
}