AdonisJS 中文文档渲染
你可以通过调用 View.render 方法来渲染视图。该方法接受相对于 views 目录的模板路径和要传递给模板的数据对象，并始终返回一个字符串。
import View from '@ioc:Adonis/Core/View'
const html = await View.render('welcome', {
greeting: 'Hello'
})在 HTTP 请求期间，建议使用 ctx.view 对象而不是顶级导入。
ctx.view 是为该特定请求创建的 View 模块的一个隔离实例，并与模板共享特定请求的数据。
Route.get('/', async ({ view }) => {
const html = await view.render('welcome', {
greeting: 'Hello'
})
return html
})渲染模式#
Edge 公开了用于渲染视图的同步和异步 API。我们建议使用异步 API。在异步模式下，Edge 执行的 I/O 操作不会阻塞 Node.js 事件循环。
在以下示例中：
-user.edge 文件从磁盘同步读取。
- 任何对加载部分或组件的内部引用也将是同步的。
- 模板不能使用
await关键字。例如：{{ await getUser() }}将不起作用。
view.renderSync('user', {
getUser: async () => {},
})而 view.render 方法与所有同步渲染的警告无关。
await view.render('user', {
getUser: async () => {},
})磁盘#
Edge 允许你指定 多个根目录 来查找模板，我们称这个概念为安装盘。
我们将 ./resources/views 目录挂载为你的默认磁盘。但是，如果需要，你还可以挂载其他目录，每个目录都有一个唯一的名称。
你可以在 preload file 中编写以下代码。
// 文件名: start/views.ts
import View from '@ioc:Adonis/Core/View'
import Application from '@ioc:Adonis/Core/Application'
View.mount('material', Application.resourcesPath('themes/material'))
View.mount('elegant', Application.resourcesPath('themes/elegant'))你可以通过为磁盘名称添加前缀来渲染命名磁盘中的视图。
// 渲染 themes/material/user.edge
view.render('material::user')
// 渲染 themes/elegant/user.edge
view.render('elegant::user')同样，你可以在引入部分组件时为磁盘名称添加前缀。
@include('material::header')
@component('material::button')
@end内存模板#
Edge 允许你注册内存中的模板，而无需在磁盘上创建任何文件。当你想提供一些模板作为 npm 包的一部分时，你可能会发现它很有用。
import View from '@ioc:Adonis/Core/View'
View.registerTemplate('uikit/button', {
template: `
<button {{ $props.serializeExcept(['title']) }}>
{{ title }}
</button>
`,
})你可以直接渲染模板，也可以将其用作组件，其名称由 View.registerTemplate 方法提供。
@!component('uikit/button', {
title: 'Signup',
class: ['btn', 'btn-primary'],
id: 'signup'
})注意：
在路径冲突的情况下，内存模板优先于磁盘模板。
渲染原始字符串#
Edge 还公开了 API 以将原始字符串值直接呈现为模板。但是请注意，原始字符串不享受模板缓存的好处，因为没有与唯一路径相关联。
await View.renderRaw(
`
<p> Hello {{ username }} </p>
`,
{
username: 'virk',
}
)使用 renderRawSync 方法同步渲染原始字符串。
View.renderRawSync(
`
<p> Hello {{ username }} </p>
`,
{
username: 'virk',
}
)视图渲染器实例#
Edge 中的视图使用 ViewRenderer 类进行渲染。所以每次运行 View.render 方法时，我们都会创建一个新的 ViewRenderer 实例，然后在其上调用 render 方法。
你还可以通过调用 View.getRenderer() 方法获取渲染器实例，并使用 share 方法与视图共享数据。
import View from '@ioc:Adonis/Core/View'
const view = View.getRenderer()
view.share({ url: '/', user: auth.user })
await view.render('home')ctx.view 对象是 ViewRenderer 类的一个实例。
缓存#
将模板编译为 JavaScript 函数是一个耗时的过程，因此建议在生产环境中缓存已编译的模板。
你可以使用 CACHE_VIEWS 环境变量控制模板缓存。只需确保在生产环境中将该值设置为 true 即可。
CACHE_VIEWS=true所有模板都缓存在内存中。目前，我们没有任何计划支持磁盘缓存，因为没有必要。
原始文本不会占用太多空间，即使在内存中保留数千个预编译模板也不成问题。
本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号