你可以通过调用 `View.render` 方法来渲染视图。该方法接受相对于 `views` 目录的模板路径和要传递给模板的数据对象,并始终返回一个字符串。 ```ts import View from '@ioc:Adonis/Core/View' const html = await View.render('welcome', { greeting: 'Hello' }) ``` 在 HTTP 请求期间,建议使用 `ctx.view` 对象而不是顶级导入。 `ctx.view` 是为该特定请求创建的 View 模块的一个隔离实例,并与模板共享特定请求的数据。 ```ts 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() }}`将不起作用。 ```ts view.renderSync('user', { getUser: async () => {}, }) ``` 而 `view.render` 方法与所有同步渲染的警告无关。 ```ts await view.render('user', { getUser: async () => {}, }) ``` ## 磁盘 Edge 允许你指定 **多个根目录** 来查找模板,我们称这个概念为安装盘。 我们将 `./resources/views` 目录挂载为你的默认磁盘。但是,如果需要,你还可以挂载其他目录,每个目录都有一个唯一的名称。 你可以在 [preload file](link-to-preloading-files) 中编写以下代码。 ```ts // 文件名: 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')) ``` 你可以通过为磁盘名称添加前缀来渲染命名磁盘中的视图。 ```ts // 渲染 themes/material/user.edge view.render('material::user') // 渲染 themes/elegant/user.edge view.render('elegant::user') ``` 同样,你可以在引入部分组件时为磁盘名称添加前缀。 ```javascript @include('material::header') @component('material::button') @end ``` ## 内存模板 Edge 允许你注册内存中的模板,而无需在磁盘上创建任何文件。当你想提供一些模板作为 npm 包的一部分时,你可能会发现它很有用。 ```ts import View from '@ioc:Adonis/Core/View' View.registerTemplate('uikit/button', { template: ` `, }) ``` 你可以直接渲染模板,也可以将其用作组件,其名称由 `View.registerTemplate` 方法提供。 ```javascript @!component('uikit/button', { title: 'Signup', class: ['btn', 'btn-primary'], id: 'signup' }) ``` > 注意: 在路径冲突的情况下,内存模板优先于磁盘模板。 ## 渲染原始字符串 Edge 还公开了 API 以将原始字符串值直接呈现为模板。但是请注意,原始字符串不享受模板缓存的好处,因为没有与唯一路径相关联。 ```ts await View.renderRaw( `
Hello {{ username }}
`, { username: 'virk', } ) ``` 使用 `renderRawSync` 方法同步渲染原始字符串。 ```ts View.renderRawSync( `Hello {{ username }}
`, { username: 'virk', } ) ``` ## 视图渲染器实例 Edge 中的视图使用 [ViewRenderer](https://github.com/edge-js/edge/blob/develop/src/Renderer/index.ts) 类进行渲染。所以每次运行 `View.render` 方法时,我们都会创建一个新的 `ViewRenderer` 实例,然后在其上调用 `render` 方法。 你还可以通过调用 `View.getRenderer()` 方法获取渲染器实例,并使用 `share` 方法与视图共享数据。 ```ts 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` 即可。 ```sh CACHE_VIEWS=true ``` 所有模板都缓存在内存中。目前,我们没有任何计划支持磁盘缓存,因为没有必要。 原始文本不会占用太多空间,即使在内存中保留数千个预编译模板也不成问题。