奧裏利亞 - HTML只自定義元素的內聯定義

Question

我在奧裏利亞視圖模型有一個遞歸的對象，看起來像這樣：

Class BottomlessPit { 
    Name: string = ''; 
    MorePits: BottomlessPit[] = null; 
} 

因此，我想在我的奧裏利亞視圖中使用遞歸模板。它只會在一個地方使用，所以我寧願使用模板文字。這是一些不起作用的僞代碼：

<template name="pit"> 
    <li> 
     ${Name} 
     <compose view.bind="pit" repeat.for="subpit of MorePits"></compose> 
    </li> 
</template> 

這是Aurelia的一項功能嗎？

Answer 1

確定這個傷害我的頭一點點，但這裏有一個方法，使定義內嵌HTML，只自定義元素...

https://gist.run?id=11ac077048cab0ad9979

app.html

<template> 
    <h1>Aurelia - Inline Custom Elements</h1> 

    <template name="person-element" bindable="person"> 
    <h3>${person.name}</h3> 
    <person-element repeat.for="parent of person.parents" person.bind="parent"></person-element> 
    </template> 

    <template name="hello" bindable="message"> 
    ${message} 
    </template> 

    <person-element person.bind="kid"></person-element> 

    <hello message="hello world"></hello> 
</template> 

app.js

export class App { 
    kid = { 
    name: 'North West', 
    parents: [ 
     { 
     name: 'Kanye West', 
     parents: [] 
     }, 
     { 
     name: 'Kim Karsomething', 
     parents: [] 
     } 
    ] 
    }; 
} 

個

main.js

import {relativeToFile} from 'aurelia-path'; 
import {Origin} from 'aurelia-metadata'; 
import {TemplateRegistryEntry, TemplateDependency} from 'aurelia-loader'; 

// override the TemplateRegistryEntry's "template" property, adding 
// logic to process inline custom elements (eg <template name="foo">) 
let templateDescriptor = Object.getOwnPropertyDescriptor(TemplateRegistryEntry.prototype, 'template'); 
Object.defineProperty(TemplateRegistryEntry.prototype, 'standardTemplate', templateDescriptor); 
Object.defineProperty(TemplateRegistryEntry.prototype, 'template', { 
    get: function get() { 
    return this.standardTemplate; 
    }, 
    set: function set(value) { 
    // hand off to the standard template property... 
    this.standardTemplate = value; 

    let address = this.address; 

    // loop through each of the inline custom elements and register 
    // them as dependencies. 
    let namedTemplates = value.content.querySelectorAll('template[name]:not([name=""])'); 
    for (var i = 0, ii = namedTemplates.length; i < ii; ++i) { 
     let current = namedTemplates[i]; 
     let name = current.getAttribute('name'); 
     let id = relativeToFile(`./${name}.html`, address); // potential for collision but putting in subfolder would be weird if the inline element had it's own <require> elements 

     // give the loader the template html 
     System.set(
     id + '!' + System.normalizeSync('text'), 
     System.newModule({ __useDefault: true, default: current.outerHTML})); 

     // register the dependency 
     this.dependencies.push(new TemplateDependency(id, name)); 

     // remove the inline template element from the template 
     current.parentNode.removeChild(current); 
    } 
    } 
}); 

export function configure(aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .developmentLogging(); 

    aurelia.start().then(() => aurelia.setRoot()); 
}