Best way to change html state class on active page

Question

Best way to change html state class on active page

I'm testing 2 example projets, one with just express and another with tower.js

I just want to put the correct css class on the li of the active page, in the beginning of the page rendering.

Ex:

I'm in the page /info, and I want to add the class active on the first li

Info

other

The template engine I'm using is Coffekup / Jade

I tried to get the url path and compare with the href, passing via locals... But I dont think is a good solution to pass via locals..

Any better solution?

Thanks.

node.js
towerjs

Answer 1

This answer applies to towerjs, and coffeekup. I don't have enough experience with express and jade to say anything about it.

In coffeekup, the correct way to put attributes like css class on an html tag is by using a hash, ie attributeName: atrributeValue. An example, from the tower.js template that handles the primary layout, which is in app/views/layouts/application.coffee would be :

    nav id: "navigation", class: "navbar", role: "navigation", ->
      div class: "navbar-inner", ->
        div class: "container", ->
          partial "shared/navigation"

See, here we have three layers of tags, a nav with a div nested in that, and another div nested inside that one, followed by the partial which is the content to render inside them. Instead of a partial, it could just as easily have been text.

So, in your case, you'd go into app/views/info and find the correct template with the li you want to put the class on, then it would just be

li class: "active", ->

Now, if you are talking about changing the css class on the li once its already been rendered, dynamically, you'd need to do this from the client-side code, and you'd do it using coffeescript just like you would use javascript in a normal html page.

If you are trying to learn tower and coffeekup (which is actually coffeecup now), I really recommend https://github.com/mark-hahn/coffeekup-intro . You can work through it in less than half an hour and will have a good understanding of coffeecup. If you want to see an example of a Towerjs app that with explanations, you can check out my demoApp here: https://github.com/edubkendo/demoApp .

Edit: To answer the question now that I understand it:

First, in config/assets.coffee, in the first block, add "/app/client/controllers/applicationController" like so:

module.exports =
  javascripts:
    application: [
      "/app/client/config/application"
      "/config/routes"
      "/app/views/templates"
      "/app/models/user"
      "/app/client/controllers/usersController"
      "/app/models/post"
      "/app/client/controllers/postsController"
      "/app/client/controllers/applicationController"
]

Then, in your client-side controller, app/client/controllers/applicationController.coffee:

class App.ApplicationController extends Tower.Controller

  pathname = window.location.pathname

  pathRegExp = new RegExp(pathname.replace(/\/$/,'') + "$")

  $('.navbar a').each(->
    if (pathRegExp.test @href.replace(/\/$/,''))
      $(@).addClass('active')
    )

This will now add the active class to the currently active link.