如何在Express中使用Jade的CoffeeScript过滤器?

时间:2015-10-14 14:00:19

标签: node.js express coffeescript pug

我很难理解如何在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过滤器无法正常运行。

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

我有什么遗漏吗?

1 个答案:

答案 0 :(得分:2)

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

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

参考:http://jade-lang.com/reference/filters/