Aurelia-仅HTML自定义元素的内联定义

Aurelia - Inline definition of HTML-only custom element

本文关键字：定义 元素 HTML 自定义 Aurelia-      更新时间：2023-09-26

我的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的特征吗？

好吧，这有点伤了我的头，但这里有一种方法可以定义仅限内联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());
}
相关文章：