Best way to change html state class on active page

Question

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.

Why isn't a good idea to pass via locals? :) – alessioalex Jun 15 '12 at 10:55 — alessioalex, Jun 15 '12 at 10:55
It's boring to pass for every action :P. – Rafael Motta Jun 15 '12 at 19:24 — Rafael Motta, Jun 15 '12 at 19:24

Edub Kendo · Answer 1 · 2012-06-16T15:09:54.570

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.

Hi Edub. Yes, I understood everything you wrote. The problem is how I can get the url path, like window.location.pathname, without send via locas in the controllers. With the pathname I can compare with the link's href in the navigation, and add the class active in the correct element. Tks. — Rafael Motta, Jun 15 '12 at 22:16
In tower, you have access to these variables in the client-side controllers, for instance `app/client/controllers/usersController.coffee`. So you could write code in those file to compare those variables and add your CSS class. You do not have access to these variables directly in the templates without passing them in, as far as I can tell. — Edub Kendo, Jun 16 '12 at 08:07
And, to make this easier, in config/assets.coffee, the first block of code is module.exports - javascripts - application, add the line: `"/app/client/controllers/applicationController"`, then you can write your code in the applicationController so it will be applied to every page, and you won't have to repeat it on each client/controller. — Edub Kendo, Jun 16 '12 at 08:23

Best way to change html state class on active page

1 Answers1