模板变量范围

5.x

5.x

Edge 公开了不同的 API，用于与模板共享数据。每个 API 都会更改模板内数据可用的范围。

模板状态

模板状态表示为你可以在渲染视图时传递的对象。例如：

const state = {
  user: { id: 1, username: 'virk' },
}

await view.render('user', state)

模板状态可用于呈现的模板、它的部分以及它使用的布局。换句话说，模板状态不与组件共享。

全局变量

全局变量可用于所有模板，包括组件。你通常会使用它们来共享帮助程序或应用程序范围的元数据。

你可以使用View.global方法注册全局。例如，你可以在 预加载文件 或服务提供商启动方法中编写以下代码。

// title: start/view.ts
import View from '@ioc:Adonis/Core/View'

View.global('nl2br', function (text) {
  return text.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br />$2')
})

View.global('menu', [
  {
    url: '/',
    text: 'Home',
  },
  {
    url: '/about',
    text: 'About',
  },
  {
    url: '/contact',
    text: 'Contact',
  },
])

Usage

<p> {{{ nl2br(post.description) }}} </p>

@each(item in menu)
  <a href="{{ item.url }}"> {{ item.text }} </a>
@end

本地变量

本地变量类似于 View renderer 的给定实例的全局变量。你可以使用view.share方法共享本地值

你将发现自己主要使用中间件中的view.share`方法与模板共享数据。

Route
  .get('/', ({ view }) => {
    await view.render('home')
  })
  .middleware(({ view }, next) => {
    view.share({
      foo: 'bar'
    })

    return next()
  })

内联变量

最后，你还可以使用@set标记在模板文件中定义内联变量。

@set('title', 'Edge - A template engine for Node.js')

<title> {{ title }} </title>

内联变量与你在 JavaScript 中定义的变量具有相同的范围。例如：如果变量是在 each 块内定义的，则不能在 each 块外访问它。

@each(item in cart)
  @set('price', item.quantity * item.unitPrice)
  {{ price }}
@end

{{ price }} {{-- undefined --}}

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

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

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