奥里利亚 - 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()); 
}