在活动页面上更改 html 状态类的最佳方法

Question

我正在测试 2 个示例项目，一个仅使用 express，另一个使用 tower.js

我只想在页面渲染开始时将正确的css类放在活动页面的li上。

例如：

我在页面/info中，我想在第一个li上添加活动的类

信息

其他

我使用的模板引擎是Coffekup / Jade

我尝试获取 url 路径并与 href 进行比较，通过 locals 传递...但我认为通过 locals 传递不是一个好的解决方案..

有更好的解决方案吗？

谢谢。

Answer 1

这个答案适用于 towerjs 和 coffeekup。我对express和jade的经验还不够多。

在coffeekup 中，将css 类等属性放在html 标记上的正确方法是使用哈希，即attributeName: atrributeValue。一个示例，来自处理主要布局的 tower.js 模板，位于 app/views/layouts/application.coffee 中：

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

看，这里我们有三层标签，一个导航，其中嵌套了一个 div，另一个 div 嵌套在其中，然后是要在其中呈现的内容的部分。而不是部分，它可以很容易地是文本。

因此，在您的情况下，您可以进入app/views/info 并找到正确的模板，其中包含您要放置课程的 li，然后就可以了

li class: "active", ->

现在，如果您正在讨论更改 li 上的 css 类，一旦它已经被动态渲染，您需要从客户端代码执行此操作，并且您可以像您一样使用咖啡脚本来执行此操作将在普通的 html 页面中使用 javascript。

如果你正在尝试学习 tower 和 coffeekup（现在实际上是 coffeecup），我真的推荐 https://github.com/mark-hahn/coffeekup-intro 。您可以在不到半小时的时间内完成它，并对咖啡杯有一个很好的了解。如果你想看一个带有解释的 Towerjs 应用示例，你可以在这里查看我的 demoApp：https://github.com/edubkendo/demoApp。

编辑：现在我理解了回答这个问题：

首先，在config/assets.coffee，在第一个块中，添加"/app/client/controllers/applicationController"，如下所示：

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"
]

然后，在您的客户端控制器中，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')
    )

现在这会将活动类添加到当前活动的链接。