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

Question

我正在测试 2 个示例项目，一个只用快递，另一个用塔.js

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

前任：

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

信息

其他

我正在使用的模板引擎是咖啡/翡翠

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

有什么更好的解决方案吗？

谢谢。

Answer 1

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

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

    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 类，一旦它已经动态地呈现，你需要从客户端代码中执行此操作，并且你会使用 coffeescript 来做到这一点，就像你在普通的 html 页面中使用 javascript 一样。

如果你想学习塔和咖啡库（现在实际上是咖啡杯），我真的推荐 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')
    )

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