渲染

5.x

5.x

你可以通过调用 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 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/adonisjs/5.x/vi...

译文地址：https://learnku.com/docs/adonisjs/5.x/vi...