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

尝试使用Aurelia功能，我想创建一个简单的自定义属性，该属性根据与属性关联的模板将内容注入到定义属性的元素中。到目前为止，我只是为自定义属性创建视图和视图模型，以及使用属性注释元素，没有运气。如何呈现与自定义属性相关联的模板。任何链接或信息将不胜感激。模板可以与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>

来源

2017-05-02 epitka

自定义属性需要手动操作DOM，因为默认情况下它们没有挂入诱人引擎，但是哟你也可以这样做。在最新的Aurelia周刊中有这方面的文章 – Charleh

http://www.jeremyg.net/entry/adding-a-view-to-a-custom-attribute-in-aurelia这里的文章 – Charleh

你可以渲染模板使用模板引擎，然后将结果作为元素的子元素插入到DOM中，该元素附加到 – Charleh

这是我落得这样做，它似乎工作目前为止很好

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

来源

2017-05-15 13:32:44 epitka

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

回答

相关问题