在marko模板中全局访问变量 [英] accessing variable globally in marko template

问题描述

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

1. header.marko


2. layout.marko


3. footer.marko

页面和页脚布局呈现在layout.marko内

当我们创建一个新的marko页面（内容页面）时，我们使用这样的layout marko

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

并加载像这样的标记

<$ p $ （> ./ views / home.marko）。stream（data）;

现在我们想要全局地访问变量。我 - 如果我们有一个变量用户名='abc'。我们想要在标题，布局或页脚标记文件中访问并显示此名称。但我们不希望为每个内容marko页面传递用户名。如果我们在网站上有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>颜色是$ {data.color}< / h1> 
 
 // header.marko 
< h2>标头< / h2> 
< p if（out.global.currUser）> 
以$ {out.global.currUser.username} 
登录< / p> 
< p else> 
未登录
< / p> 
  

有效。

不希望每 .stream（）传递 $ global 到
，所以一个想法将其存储在Koa上下文中，让
任何中间件将数据附加到它上面，然后编写一个帮助器，将它传递到
模板中。

  //早期初始化对象，以便其他中间件可以使用它
 //并定义一个帮助器this.stream（templatePath，data），它将
 //将$ global传递给我们
 router.use（function *（next）{
 this.global = {} 
 this.stream = function（path，data）{
 data。$ global = this.global 
 return marko.load（path）.stream（data）
} 
 yield next 
}）
 
 //这里是一个中间件的例子，它可能会从数据库加载当前用户
 //并附加到所有模板以访问
 router.use（function *（next）{
 this .global.currUser = {
 id：2，
 username：'han sel'
} 
产生下一个
}）
 
 //现在在我们的路由中，我们可以调用我们定义的帮助器
 //并传递任何附加数据
 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> 代替。

We are using marko template engine in nodejs application. We have 3 marko layout

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

header and footer layout render inside layout.marko

when ever we create a new marko page (content page) we use layout marko like this

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

and load marko like this

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

Now we want to access a variably globally. i-e if we have a variable username='abc'. we want to access and display this name in header , layout or footer marko file. But we do not want to pass username for each content marko page. i-e if we have 100 pages on website we do not want to pass username for all 100 pages. whenever user log in save username in global variable and use this global variable throughout all pages.

How we can achieve this global variable functionality.

解决方案

Looks like you can use the $global property to expose data for all templates.

For example:

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

And then these templates:

// 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>

That works.

But obviously you don't want to have to pass $global into every .stream(), so one idea is to store it on the Koa context, let any middleware attach data to it, and then write a helper that passes it into the template for us.

// 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
  })
})

That code works with the templates I defined above: ${out.global.currUser} is accessible from header.marko, yet ${data.color} is accessible from home.marko.

I've never used Marko, but I was curious enough to read the docs after seeing your question since I've thought of using it from time to time. I didn't feel like figuring out how <layout-use> works, so I used <include> instead.

这篇关于在marko模板中全局访问变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！