Question

我有一个可以像

那样调用的自定义Aurelia

测试

这可以在网站的html页面中正常使用。

但是，我有一些使用这些自定义返回html的restful服务元素。然后我使用这个html作为我的Aurelia网站的内容。此时，自定义元素将不会执行。这有一种方法告诉Aurelia在显示之前处理返回的html中的自定义元素吗？

由于

Answer 1

您可以使用<compose>和InlineViewStrategy的组合。

Gist演示：https://gist.run/?id=bd1122986ba8dabde8111c3b4ab6df6f

这里的主要思想是拥有一个自定义组件，它可以使用从返回的JSON结果中提取的html。使用InlineViewStrategy，可以即时获取功能齐全的模板解析器并向其提供<compose>。这样，html块将被视为应用程序的任何其他部分。它也可以包含其他自定义元素。

自定义元素

基本上，它只是一个扩展的<compose>，但对于view可绑定属性，它接受一个字符串变量而不是一个视图路径。

<强> part.html

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

<强> part.js

import {inject, bindable, InlineViewStrategy} from 'aurelia-framework';
import {Api} from './api'; // REST of your magic goes here

@inject(Api)
export class Part {

  // template string
  @bindable view;

  // data model
  @bindable model;

  // rest api url (optional)
  @bindable templateHref;

  constructor(api) { 
    this.api = api;
  } 

  // render html template
  viewChanged() {
    if (this.view) {
      this.viewStrategy = new InlineViewStrategy(this.view);
    }
  }

  // load html from remote url (optional feature)
  templateHrefChanged() {
    if (this.templateHref) {
      this.api
        .loadTemplate(this.templateHref)
        .then(result => {
          this.view = result.content;
        });
    }
  }
}

用法

远程api处理

// api call goes here

// JSON result could be similar to this
result = {
    content: 
        `<template>
          <require from="./custom-part"></require>

          <h2>${model.title}</h2>
          <custom-part title.bind="model.title"></custom-part>
          <p>${model.content}</p>
        </template>`,

    error: false
};

this.testView = result.content;

<强> app.html

从变量

加载模板字符串

<part view.bind="testView" model.bind="testModel"></part>

从网址加载模板

<part template-href="http://remote-api-url" model.bind="{title: 'Another...', content: '...'}"></part>

从不存在的网址加载模板

<part template-href="./remote-api-notfound" model.bind="testModel"></part>

我希望它有所帮助。

处理返回的json中指定的自定义元素

1 个答案:

自定义元素

用法