如何使用Aurelia.io增强服务器端生成的页面？

Question

我正在编写一个应用程序，其中一些部分为SPA，一些页面在服务器端生成用于SEO。 我选择了Aurelia.io框架，并使用enhance方法在我的页面上启用自定义元素。 但我找不到在我的服务器端页面上使用aurelia特定模板指令和插值的最佳方法。 让我们从一个例子开始吧。

我的所有页面都包含动态标题。 此标头将是名为my-cool-header的自定义元素。 此标头将加载验证用户并显示其名称，或者，如果当前未对用户进行身份验证，则将显示指向登录的链接。 页面正文将在服务器端生成并缓存。 所以，我们会有类似的东西：

<html>
<body>
    <my-cool-header>
        <img src="logo.png">
        <div
            show.bind="user">${user.name}</div>
        <div
            show.bind="!user"><a href="/signin">Sign-in</a></div>
    </my-cool-header>
    <div>Cachabled content</div>
</body>
</html>

然后，我的标题将由以下定义：

import {UserService} from './user';
import {inject} from 'aurelia-framework';

@inject(UserService)
export class MyCoolHeader {
    constructor(userService) {
        this.userService = userService;
    }

    async attached() {
        this.user = await this.userService.get();
    }
}

使用以下模板：

<template>
    <content></content>
</template>

而这个引导脚本：

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources('my-cool-header');

  aurelia.start().then(a => a.enhance(document.body));
}

在此配置中，自定义元素已正确加载和实例化。 但是，我无法访问<content>节点内的节点的viewModel。 因此，所有插值（ ${user.name}) and attributes ( show.bind ) are ignored. If I include a custom-element in my content template, it will be loaded only if it is declared as global in the bootstrap : the ) are ignored. If I include a custom-element in my content template, it will be loaded only if it is declared as global in the bootstrap : the `标记被忽略。

我找到了一个解决方法，通过将自定义viewModel设置为增强方法然后将其注入我的自定义元素类，在阅读doc之后能够更改viewModel。 就像是：

import {MainData} from './main-data';
export function configure(aurelia) {
  const mainData = aurelia.container.get(MainData);
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources('my-cool-header');

  aurelia.start().then(a => a.enhance(mainData, document.body));
}

自定义元素：

import {UserService} from './user';
import {inject} from 'aurelia-framework';
import {MainData} from './main-data';

@inject(UserService, MainData)
export class MyCustomElement {
    constructor(userService, mainData) {
        this.userService = userService;
        this.mainData = mainData;
    }

    async attached() {
        this.mainData.user = await this.userService.get();
    }
}

最后，如果我像这样更改我的模板，它将起作用：

<html>
<body>
    <my-cool-header
        user.bind="user">
        <img src="logo.png">
        <div
            show.bind="user">${user.name}</div>
        <div
            show.bind="!user"><a href="/signin">Sign-in</a></div>
    </my-cool-header>
    <div>Cachabled content</div>
</body>
</html>

我无法相信这是正确的方法，因为它很丑陋并且无法解决<require>标签的问题。 所以我的问题是：最好的方法是什么？

Answer 1

感谢您的线索，我找到了解决方案！

自定义元素需要构建自己的模板：

import {processContent, noView} from 'aurelia-framework';

@processContent(function(viewCompiler, viewResources, element, instruction) {
  instruction.viewFactory = viewCompiler.compile(`<template>${element.innerHTML}</template>`, viewResources, instruction);
  element.innerHTML = '';
  return false;
})
@noView
export class MyCustomElement {
  attached() {
    this.world = 'World!';
    this.display = true;
  }  
}

然后，在我从服务器的视图中，我们可以插入并需要自定义元素！

<body>
  <my-custom-element>
    <require="./other-custom-element"></require>
    <p
      if.bind="display">Hello ${world}</p>
    <other-custom-element></other-custom-element>
  </my-custom-element>
</body>

我写了一个装饰器来帮助创建这种增强的自定义元素： https ： //github.com/hadrienl/aurelia-enhanced-template

Plusdesétailsenfrançaisurmon blog： https ：//blog.hadrien.eu/2016/02/04/amelioration-progressive-avec-aurelia-io/

编辑： <require>并没有真正使用此解决方案。 我得再挖一次:(

Answer 2

从以下位置更改MyCoolHeader的模板：

<template>
  <content></content>
</template>

至：

<template>
  <img src="logo.png">
  <div show.bind="user">${user.name}</div>
  <div show.bind="!user"><a href="/signin">Sign-in</a></div>
</template>

然后将服务器生成的页面更改为以下内容：

<html>
<body>
  <my-cool-header></my-cool-header>
  <div>Cachabled content</div>
</body>
</html>

希望有所帮助。 如果这不能解决问题或者不是可接受的解决方案，请告诉我。

编辑

在阅读了你的回复并考虑了这一点后，我倾向于删除<my-cool-header>元素。 它不提供任何行为，它只作为数据加载器，它的模板由服务器端渲染过程提供，并且它应该在aurelia模板系统之外呈现，没有真正需要重新渲染它。 这是这种方法的样子，让我知道它是否更合适：

<html>
<body>
  <div class="my-cool-header">
    <img src="logo.png">
    <div show.bind="user">${user.name}</div>
    <div show.bind="!user"><a href="/signin">Sign-in</a></div>
  </div>

  <div>Cachabled content</div>
</body>
</html>

import {MainData} from './main-data';
import {UserService} from './user';

export function configure(aurelia) {
  const mainData = aurelia.container.get(MainData);
  const userService = aurelia.container.get(UserService);

  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  Promise.all([
    this.userService.get(),
    aurelia.start()    
  ]).then(([user, a]) => {
    mainData.user = user;
    a.enhance(mainData, document.body);
  });
}

Answer 3

为了补充Jeremy的答案，如果您确实将模板更改为：

<template>
  <img src="logo.png">
  <div show.bind="user">${user.name}</div>
  <div show.bind="!user"><a href="/signin">Sign-in</a></div>
</template>

当Aurelia处理元素并且在没有内容选择器的情况下，自定义元素标记内的任何内容都将被模板替换时，将显示此内容

如果您然后将非JavaScript内容放在自定义元素标记内：

<my-cool-header>
    <div>This stuff will be visible when JS is turned off</div>
</my-cool-header>

在上面的例子中，在没有JS的情况下， div应该仍然存在，因为Aurelia不会将它从DOM中删除。

（这当然是假设你的服务器端技术人员在服务页面时出于某种原因不会破坏/修复DOM中的未知HTML标签 - 它可能不会因为它会破坏Aurelia而无法解决）

编辑：

您可能正在寻找的替代方案是@processContent装饰器。

这允许您传递在Aurelia检查元素之前运行的回调函数。

此时，您可以解除自定义元素标记之间的内容，并将其添加为模板元素的子元素。 然后，内容应该在您的viewmodel的范围内。

通过这种方式，您可以在没有javascript的自定义元素标记之间使用相同的标记，并在Aurelia运行时在正确的范围内使用相同的标记

import {processContent, TargetInstruction, inject} from 'aurelia-framework';

@inject(Element, TargetInstruction)
@processContent(function(viewCompiler, viewResources, element, instruction) {
    // Do stuff
    instruction.templateContent = element;

    return true;
})
class MyViewModel {
    constructor(element, targetInstruction) {
        var behavior = targetInstruction.behaviorInstructions[0];
        var userTemplate = behavior.templateContent;

        element.addChild(userTemplate);
    }
}

免责声明 ：以上代码尚未经过测试，我将其从我的网格中删除了几个版本 - 您可能需要调整

如何使用Aurelia.io增强服务器端生成的页面？

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-02-04 11:05:42

解决方案2
2 2016-01-28 12:23:36

编辑

解决方案3
0 2016-02-01 15:48:12

如何使用Aurelia.io增强服务器端生成的页面？

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-02-04 11:05:42

解决方案2 2 2016-01-28 12:23:36

编辑

解决方案3 0 2016-02-01 15:48:12

解决方案1
3 已采纳 2016-02-04 11:05:42

解决方案2
2 2016-01-28 12:23:36

解决方案3
0 2016-02-01 15:48:12