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

【问题标题】：Inline template in custom aurelia component自定义 aurelia 组件中的内联模板
【发布时间】：2017-01-01 18:54:15
【问题描述】：

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

谢谢

【问题讨论】：

标签： aurelia aurelia-templating

【解决方案1】：

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

import {inlineView} from 'aurelia-framework';

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

【讨论】：

这绝对是一个正确的答案。但是我不知道如何根据可绑定属性的值动态提供模板。视图中的 getViewStrategy 方法由 aurelia 框架在管道中的 activate 方法之后调用，因此，当调用 getViewStrategy 时，我可以获得模型（如果通过 compose 添加视图）或参数（如果视图在路由器视图中） )。自定义元素有没有像 getViewStrategy 这样的钩子？
我向团队询问了这个问题。这是给出的理由，“基本上，如果我们允许它会导致每个自定义元素的创建都是异步的。这对于性能和复杂性来说将是一个大问题。所以，我们基本上将其隔离到路由器视图和compose（或人们编写的自定义元素来做同样的事情。）如果有人需要自定义元素，我通常会建议他们创建一个具有内部视图的元素，使用 compose 然后在那里处理它。”
我了解它可能导致的性能后果，我猜 Marton Sagi 的回答遵循了团队的建议。我只需要这种行为，因为我在一个使用 aurelia + 聚合物的项目中，并且经常重复。对于像纸菜单按钮这样的聚合物小部件，我猜它不能正常工作，我猜 repeat.for 通过任务队列填充 dom 和该聚合物不会监听 dom 的变化，因此使用 repeat.for 将纸质项目添加到纸质菜单按钮没有预期的效果。目标是在将项目数组绑定到 repeat.for 后重新编写整个模板
自发布此评论以来，情况可能发生了变化。 aurelia.io/docs/integration/polymer#data-binding 在其创建多个paper-items 的示例中使用repeat.for。

【解决方案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>

希望，这会有所帮助。

【讨论】：

哇！！实在是太棒了。我以前没有使用过 ......这绝对符合我的需要。非常感谢