Question

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

由于

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

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

自定义元素：

<强> inline.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>`);
    }
}

<强> inline.html

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

视图中的用法：

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

<强> app.js

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

<强> app.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>

希望，这有帮助。

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

2 个答案:

自定义元素：

视图中的用法：