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

Question

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

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

前任：

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

信息

其他

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

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

有更好的解决方案吗？

谢谢。

Answer 1

这个答案适用于 towerjs 和 coffeekup。我没有足够的快递和玉石经验来谈论它。

在 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 嵌套在其中的 nav，另一个 div 嵌套在其中，然后是要在其中呈现的内容的部分。而不是部分，它可以很容易地是文本。

所以，在你的情况下，你会进入app/views/info并找到正确的模板，其中包含你想要放置类的 li，那么它就是

li class: "active", ->

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

如果你正在尝试学习 tower 和 coffeekup（现在实际上是 coffeecup），我真的推荐https://github.com/mark-hahn/coffeekup-intro。你可以在不到半小时的时间内完成它，并且对coffeecup有一个很好的了解。如果您想查看带有说明的 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')
    )

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