aurelia - 自定义 aurelia 组件中的内联模板

Question

在 aurelia 中，对于视图，我可以通过实现 getViewStrategy 方法并在 ViewModel 中返​​回一个 InlineViewStrategy 来提供一个内联模板。但这仅适用于视图，不适用于自定义元素。是否有类似的方法为自定义元素提供内联模板？

谢谢

Answer 1

你只需要使用@inlineView装饰器。这是一个要点：https ://gist.run/?id=1df0554fcfb51fd9ab3d60367bac1b60

import {inlineView} from 'aurelia-framework';

@inlineView('<template>Hello from the inline view</template>')
export class InlineViewCustomElement {
}

Answer 2

您可以使用绑定到元素的 InlineViewStrategy 实例compose。这是一个演示：https ://gist.run/?id=4e2ec80c1010c638e908589ce3fc5067

自定义元素：

内联.js

templateChanged()确保此演示的真实动态行为（在您键入时重新渲染）。虽然，它可能并非在所有情况下都需要。

import { bindable, bindingMode, InlineViewStrategy } from 'aurelia-framework';

export class Inline {

    viewStrategy;

    @bindable({ defaultBindingMode: bindingMode.oneWay })
    template;

    @bindable({ defaultBindingMode: bindingMode.oneWay })
    displayValue;

    attached() {
        this.render();
    }

    templateChanged() {
        this.render();
    }

    render() {
        this.viewStrategy = new InlineViewStrategy(`<template>${this.template}</template>`);
    }
}

内联.html

<template>
    <compose view.bind="viewStrategy"></compose>
</template>

视图中的用法：

例如，我们想显示一个漂亮的图标。

应用程序.js

export class App {
    customTemplate = '<i class="fa fa-3x fa-${displayValue}"></i>';
    customValue = 'stack-overflow';
}

应用程序.html

<template>
    <require from="./inline"></require>

    <div class="container-fluid">
      <h4 class="page-header">Inline template in custom component</h4>
      <div class="form-group">
          <label>Template:</label>
          <input class="form-control" type="text" value.bind="customTemplate" />
      </div>

      <div class="form-group">
          <label>Display Value:</label>
          <input class="form-control" type="text" value.bind="customValue" />
      </div>

      <div class="panel panel-primary">
          <div class="panel-heading">Rendered view:</div>
          <div class="panel-body">
              <inline template.bind="customTemplate" display-value.bind="customValue"></inline>
          </div>
      </div>
    </div>

</template>

希望这可以帮助。