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

debugcn 发表于 Dev

上皮

尝试 Aurelia 功能，我想创建一个简单的自定义属性，根据与属性关联的模板，将内容注入到定义属性的元素中。到目前为止，我只是为自定义属性创建视图和视图模型，并使用属性注释元素，我没有运气。一个渲染模板如何与自定义属性关联。任何链接或信息将不胜感激。

按照 Charleh 的链接，我尝试实现它，虽然视图呈现，但它不会绑定我的项目。这是代码，也许有人可以发现问题所在

测试文件

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 属性名称的正确语法是使用“-”，所以这是正确的

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

上皮

这就是我最终做的事情，到目前为止它似乎工作正常

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。