模板可以與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中的自定義屬性一起使用嗎？

回答

相關問題