我正在编写一个应用程序，其中一些部分作为 SPA，一些页面在服务器端生成以用于 SEO。我选择了 Aurelia.io 框架并使用 enhance在我的页面上启用自定义元素的方法。但是我找不到在我的服务器端页面上使用 aurelia 特定模板指令和插值的最佳方法。让我们从一个例子开始。
我的所有页面都包含一个动态标题。此 header 将是一个名为 my-cool-header 的自定义元素.此 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 ` 标签都将被忽略。
我找到了一种解决方法，可以在阅读文档后更改 viewModel，方法是设置自定义 viewModel 以增强方法，然后将其注入(inject)我的自定义元素类。像这样的东西:
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> 的问题标签。所以我的问题是:最好的方法是什么？
最佳答案
感谢您的线索，我找到了解决方案!
自定义元素需要构建自己的模板:
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;
}
}
然后，在我的服务器 View 中，我们可以插入并要求自定义元素!
<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
加上 de détails en français sur mon 博客:https://blog.hadrien.eu/2016/02/04/amelioration-progressive-avec-aurelia-io/
编辑:<require>并没有真正使用这个解决方案。我必须再次挖掘:(
关于javascript - 如何使用 Aurelia.io 增强服务器端生成的页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35060309/