Core: documentation: how to access route state in view template?

[connor11528]

Is there a way to make a PR or issue for the documentation?

I am following the Getting Started guide and in master.njk we create a navbar like so:

<nav>
        <ul class="nav nav-pills pull-xs-right">
          <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="/about" class="nav-link">About</a></li>
          <li class="nav-item"><a href="/contact" class="nav-link">Contact</a></li>
        </ul>
        <h3 class="text-muted"> Adonis Blog </h3>
      </nav>

Now for above navbar I would like to highlight where the user is by adding class="active" when the user is on a particular page. So if we're on the "Home" page the home li gets the "active" class, when on About page, "About" get the active class?

How do I access the url state with Adonis and Nunjucks like this? Thank you so much!

[thetutlage]

@connor11528 If you are using Route.on('/about').render('someview') then it passes the current request object to the view and you can access the request url.

<li class="nav-item"><a href="/" class="nav-link {{ 'active 'if request.url() == '/' }}">Home</a></li>
<li class="nav-item"><a href="/about" class="nav-link {{ 'active 'if request.url() == '/about' }}">About</a></li>
<li class="nav-item"><a href="/contact" class="nav-link {{ 'active 'if request.url() == '/contact' }}">Contact</a></li>

If you are creating views via controller, then you will have to pass the request.url() to your views manually.

[connor11528]

oh cool! I like that request object. Thank you much

[MiRush94]

how do you pass the request.url() to the view?

[RomainLanz]

Dear @MiRush94 !

You should create a globalMiddleware which will register a view global with the url.

Here's an example of mine:

'use strict'

class CurrentUrl {

  * handle(request, response, next) {
    const View = use('View')

    View.global('currentUrl', request.url())

    yield next
  }

}

module.exports = CurrentUrl

[connor11528]

Thank you @RomainLanz

[MiRush94]

Ohh wow great thank you :)

1. okt. 24. de. 9:46 ezt írta ("Connor Leech" <[email protected]

):

Thank you @RomainLanz https://github.com/RomainLanz

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/adonisjs/adonis-framework/issues/220#issuecomment-255670405,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALeg2CUqawpomvhxbMlWffLX1DVZA0O6ks5q3GJVgaJpZM4JTd7h
.

[zgabievi]

Found nice solution for this one:

1. Create global middleware. Ex: TemplateHelpers

'use strict'

class TemplateHelpers {

  * handle (request, response, next) {
    const View = use('View')

    View.global('activeRoute', function(url) {
      url = '/' + url.replace('*', '(.*)')

      return request.match(url) ? 'is-active' : ''
    })

    yield next
  }

}

module.exports = TemplateHelpers

1. in your app/Http/kernel.js:

const globalMiddleware = [
  ...
  'App/Http/Middleware/TemplateHelpers'
]

1. use this new helper in your template:

<li class="{{ activeRoute('users*') }}">{{ linkTo('users.index', 'Users') }}</li>

[MiRush94]

This is good one, thanks!! :)

[samuelcesc]

Thank you @RomainLanz and @zgabievi . Thinking of publishing a post to help other devs. Cheers!

[RomainLanz]

Hey @samuelcesc !

Note that the API has been changed about view global 😄

[samuelcesc]

@RomainLanz Any updates to the API I should take note of? Creating a middleware so that the currently loggedIn user can be identified in all views allowed on the auth middleware

[domzgarcia]

This works but changes of request.url was late. For example, you have navigation a,b,c and you print {{currentUrl}} on your view, when you click "a" nothing printed out then when you click "b" that's the time navigation "a" printed its path to the view, then do the same action by clicking a-b-c navigation. How to fix this?

[jaypozo]

Yeah, weird I get the same problem as @domzgarcia. It seems like the previously clicked url is passed through when using middleware that uses request.url().

[jaypozo]

The answer to my recent problem can be fixed as mentioned here:
https://github.com/adonisjs/adonis-framework/issues/580

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.