可以将模板与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总是不确定的。

update

正确的语法用于绑定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);
    });
}