0

2 つのサンプル プロジェクトをテストしています。1 つは Express だけで、もう 1 つは Tower.js を使用しています。

ページレンダリングの最初に、アクティブなページのliに正しいcssクラスを配置したいだけです。

元：

私は/infoページにいて、最初のliでアクティブなクラスを追加したい

  • 情報
  • 他の

    • 使用しているテンプレート エンジンは Coffekup/Jade です

    URLパスを取得してhrefと比較しようとしましたが、ローカル経由で渡しました...しかし、ローカル経由で渡すのは良い解決策だとは思いません..

    より良い解決策はありますか？

    ありがとう。

    4

    1 に答える 1

    0

    この回答は、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"

    ここでは、タグの 3 つのレイヤーがあります。その中に div がネストされた nav と、その中にネストされた別の div と、その中にレンダリングするコンテンツであるパー​​シャルが続きます。パーシャルの代わりに、テキストにすることも簡単にできます。

    したがって、あなたの場合、app/views/infoクラスを配置したいliを含む正しいテンプレートを見つけて見つけると、次のようになります

    li class: "active", ->

    ここで、Li の CSS クラスを動的にレンダリングした後に変更することについて話している場合は、クライアント側のコードからこれを行う必要があり、javascript を使用するのと同じように coffeescript を使用して行います。通常のhtmlページで。

    タワーとコーヒーカップ (現在は実際にはコーヒーカップです) を学習しようとしている場合は、https://github.com/mark-hahn/coffeekup-introを強くお勧めします。30分もかからずに完了することができ、コーヒーカップについてよく理解できます. 説明付きの 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')
    )

    これにより、アクティブなクラスが現在アクティブなリンクに追加されます。

    于 2012-06-15T19:50:04.853 に答える