Tôi đang viết một ứng dụng với một số bộ phận như SPA và một số trang tạo ra trên phía máy chủ cho SEO. Tôi đã chọn khung công tác Aurelia.io và tôi sử dụng phương thức enhance để bật các phần tử tùy chỉnh trên các trang của mình. Nhưng tôi không thể tìm thấy cách tốt nhất để sử dụng chỉ thị mẫu cụ thể aurelia và nội suy trên trang bên máy chủ của tôi. Hãy bắt đầu với một ví dụ.Làm thế nào để cải thiện trang được tạo ra phía máy chủ với Aurelia.io?
Tất cả các trang của tôi chứa một tiêu đề động. Tiêu đề này sẽ là một phần tử tùy chỉnh có tên là my-cool-header. Tiêu đề này sẽ tải người dùng được xác thực và hiển thị tên của nó hoặc nếu không có người dùng nào được xác thực, một liên kết tới đăng nhập sẽ được hiển thị. Phần thân của trang sẽ được tạo ở phía máy chủ và được lưu trong bộ nhớ cache. Vì vậy, chúng ta sẽ có một cái gì đó như thế:
<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>
Sau đó, phần đầu của tôi sẽ bởi xác định bởi:
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();
}
}
Với mẫu sau:
<template>
<content></content>
</template>
Và kịch bản bootstrap này:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.globalResources('my-cool-header');
aurelia.start().then(a => a.enhance(document.body));
}
Trong cấu hình này tion, phần tử tùy chỉnh được nạp và instanciated. Nhưng, tôi không thể truy cập viewModel của nút bên trong nút <content>. Vì vậy, tất cả các nội suy (${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 `thẻ bị bỏ qua.
Tôi đã tìm thấy cách giải quyết để có thể thay đổi chế độ xemMô hình sau khi đọc tài liệu bằng cách đặt chế độ xem tùy chỉnhPhương thức nâng cao phương pháp và sau đó, tiêm . để yếu tố tùy chỉnh của tôi lớp Một cái gì đó như:
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));
}
tuỳ chỉnh yếu tố:
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();
}
}
Và cuối cùng, nếu tôi thay đổi mẫu của tôi như vậy, nó sẽ làm việc:
<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>
Tôi không thể tin rằng đó là cách phù hợp để làm vì nó xấu xí và nó không giải quyết được vấn đề của thẻ <require>. Vì vậy, câu hỏi của tôi là: Cách tốt nhất để làm gì?
' có thể trở thành một đánh dấu lớn hơn bởi vì nó là tiêu đề trang web với tiêu đề và những thứ được hiển thị mà không có js, và với js. –
Làm thế nào để bạn phát triển "một số phần như SPA và một số trang được tạo ở phía máy chủ"? Tại sao bạn không thể chỉ sử dụng phía khách hàng? Và tại sao bạn sử dụng phía máy chủ cho seo? –
Tôi có một số trang cần được tham khảo và được tăng cường bằng javascript, trong ví dụ của tôi, tôi có tiêu đề này là một phần tử tùy chỉnh chung giữa backoffice như SPA và các trang được tham chiếu, nhưng tôi sẽ có –