テンプレートは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は常に未定義です。これは私がやってしまったものですので、これは

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