我的Aurelia视图模型中有一个递归对象,如下所示:
Class BottomlessPit {
Name: string = '';
MorePits: BottomlessPit[] = null;
}
因此,我想在Aurelia视图中使用递归模板。它只会在一个地方使用,所以我宁愿使用模板文字。这是一些不起作用的伪代码:
<template name="pit">
<li>
${Name}
<compose view.bind="pit" repeat.for="subpit of MorePits"></compose>
</li>
</template>
这是Aurelia的特色吗?
答案 0 :(得分:8)
好的,这会让我头疼一点但是这里有一种方法可以定义内联的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());
}