Aurelia - 仅 HTML 自定义元素的内联定义 [英] Aurelia - Inline definition of HTML-only custom element

问题描述

我的 Aurelia 视图模型中有一个递归对象，如下所示:

I have a recursive object in my Aurelia view model that looks like this:

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

因此，我想在我的 Aurelia 视图中使用递归模板.它只会在一个地方使用，所以我宁愿使用模板文字.这是一些不起作用的伪代码:

Therefore, I'd like to use a recursive template in my Aurelia view. It will only be used in one place, so I would rather use a template literal. Here's some pseudocode that doesn't work:

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

这是 Aurelia 的特性吗?

Is this a feature of Aurelia?

推荐答案

好吧，这让我有点头疼，但这里有一种方法可以定义内联 html-only 自定义元素...

OK this hurt my head a little bit but here's a way to enable defining inline html-only custom elements...

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: []
      }
    ]
  };
}

ma​​in.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());
}

这篇关于Aurelia - 仅 HTML 自定义元素的内联定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！