在marko模板中全局访问变量



我们在nodejs应用程序中使用marko模板引擎。我们有3个标记布局

  1. header.marko
  2. layout.marko
  3. footer.marko

页眉和页脚布局呈现内部布局。marko

当我们创建一个新的标记页(内容页)时,我们使用这样的布局标记

<layout-use template="./../layout.marko">

和这样的加载标记

this.body = marko.load("./views/home.marko").stream(data);

现在我们想全局访问一个变量。I-e如果我们有一个变量username='abc'。我们想要访问和显示这个名称在页眉,布局或页脚标记文件。但是我们不希望为每个内容标记页面传递用户名。如果我们在网站上有100页,我们不想为所有100页传递用户名。当用户登录时,将用户名保存在全局变量中,并在所有页面中使用该全局变量。

如何实现这个全局变量的功能

看起来您可以使用$global属性来公开数据

例如:

router.get('/test', function * () {
  this.type = 'html'
  this.body = marko.load("./views/home.marko")
    .stream({
      color: 'red',
      $global: { 
        currUser: { id: 2, username: 'hansel' }
      }
    })
})

然后是这些模板:

// home.marko
<include('./header.marko') />
<h1>color is ${data.color}</h1>
// header.marko
<h2>Header</h2>
<p if(out.global.currUser)>
  Logged in as ${out.global.currUser.username}
</p>
<p else>
  Not logged in
</p>

但是显然你不想把$global传递到每个.stream(),所以一个想法是将其存储在Koa上下文中,让任何中间件都将数据附加到它,然后编写一个将其传递给的助手给我们的模板。

// initialize the object early so other middleware can use it
// and define a helper, this.stream(templatePath, data) that will
// pass $global in for us
router.use(function * (next) {
  this.global = {}
  this.stream = function (path, data) {
    data.$global = this.global
    return marko.load(path).stream(data)
  }
  yield next
})
// here is an example of middleware that might load a current user
// from the database and attach it for all templates to access
router.use(function * (next) {
  this.global.currUser = {
    id: 2,
    username: 'hansel'
  }
  yield next
})
// now in our route we can call the helper we defined,
// and pass any additional data
router.get('/test', function * () {
  this.type = 'html'
  this.body = this.stream('./views/home.marko', {
    color: red
  })
})

该代码与我上面定义的模板一起工作:${out.global.currUser}可从header访问。marko,但${data.color}是可访问的home.marko .

我从来没有使用过Marko,但我很好奇,看完后阅读了文档你的问题,因为我经常想用它。我不觉得我想弄清楚<layout-use>是如何工作的,所以我用<include>代替。

相关内容

  • 没有找到相关文章

最新更新