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 case属性名称的正确语法是使用＆＃34; - ＆＃34;所以这是正确的

<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);
    });
}

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

1 个答案: