node.js - 如何在 Express 中使用 Jade 的 CoffeeScript 过滤器？

Question

我很难理解 Express/Jade 中如何实现过滤器。我发现大多数结果都使用旧版本的 Express 和/或 Jade，它们早已被弃用。我有一些代码需要内联放置在我的 Jade 网页中。但是，当我运行运行此页面的 Express 服务器时，内联 :coffee-script 过滤器将呈现为文本，如下所示: Page Render .

这是我的 index.jade 页面:

doctype html
html
  head
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css", rel="stylesheet")
  body
    .container
      h1 Denon AVR X1000 remote
      .row
        .col-md-3
          h2 Status
          dl.horizontal
            dt Connected
            dd#data-connected Not connected

            dt Power
            dd#data-power ...

            dt Input
            dd#data-input ...

            dt Volume
            dd(id="data-volume") ...

        .col-md-9
          h2#data-info-title ...
          pre#data-info

  script(src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js")
  script(src="/socket.io/socket.io.js")


  :coffee-script
    Denon = do ->
      connect: (host, port)->
        # connect to the device
        socket.emit 'denon.connect', { host: host, port: port }

      command: (cmd, params)->
        # turn the device on
        socket.emit 'denon.command', { cmd: cmd, params: params or [] }

      exec: (cmd, params)->
        # turn the device on
        socket.emit 'denon.exec', { cmd: cmd, param: param or "" }

    socket = io.connect 'http://localhost'
    socket.on 'connect', (data)->
      Denon.connect '192.168.0.31', 23

    socket.on 'denon.connected', (data)->
      console.log 'denon.connected!'

      $("#data-connected").text "Connected" 

      # get power state and info
      Denon.command 'power'
      Denon.command 'input'
      Denon.command 'volume'
      Denon.command 'info'


    socket.on 'denon.response', (data)->
      switch data.cmd
        when 'power' then $("#data-power").text data.value   
        when 'input' then $("#data-input").text data.value
        when 'volume' then $("#data-volume").text data.value
        when 'info'
          for index, value of data.value
            # clear on new data and change title
            if index is "0"
              $("#data-info").empty()
              $("#data-info-title").text value
            # just append data
            else
              $("#data-info").append "#{value}\n"
        else
          console.log 'response', data 

这是我的 server.coffee 页面，它初始化 Express 服务器:

# denon instances
dcon = new (require './lib/connection')
dcmd = new (require './lib/commands')(dcon)

# webserver
filters = require 'jade-filters'
bodyParser = require 'body-parser'
express = require 'express'
app = express()
server = require('http').createServer(app)
io = require('socket.io').listen(server)

app.set 'view engine', 'jade'
app.use bodyParser.json()
app.use bodyParser.urlencoded(extended: true)
app.use express.static 'views'

app.get '/', (req, res)-> res.render 'index'

server.listen(8000)
console.log("Now listening on port 8000...")

# socket.io
io.sockets.on 'connection', (socket)->
  # connect to the receiver
  socket.on 'denon.connect', (data)->
    dcon.connect data.host, data.port, ->
      socket.emit 'denon.connected'

  # call command methods
  socket.on 'denon.command', (data)->
    if dcmd[data.cmd]
      dcmd[data.cmd].apply dcmd, data.params or []

  # send core command
  socket.on 'denon.exec', (data)->
    dcon.send data.command, data.param

  # push response to the client
  dcon.response (cmd, value)->
    socket.emit 'denon.response', cmd: cmd, value: value

做了更多研究(发现 this )，我只能得出以下一个(或多个)结论:

• 我的 Express 服务器无法作为 Express 服务器运行，导致 :coffee-script 过滤器不起作用。

• 我需要安装另一个依赖项才能使过滤器正常工作。

我缺少什么吗？

Answer 1

您需要将其包含在 script 标记中:

script
  :coffee-script
    console.log 'This is coffee script'

引用:http://jade-lang.com/reference/filters/