I'm having difficulty understanding how filters are implemented in Express/Jade. Most results I find use a much older version of Express and/or Jade, which has been long deprecated. I have some code that needs to be placed inline in my Jade webpage. However, when I go and run the Express server I run this page on, the inline :coffee-script filter is rendered as text, as seen here: Page Render.
Here's my index.jade page:
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
And here's my server.coffee page, which initializes the Express server:
# 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
Doing some more research (finding this), I can only conclude one (or more) of the following:
My Express server isn't working as an Express server, making the
:coffee-scriptfilter non-functional.I need to install another dependency to make the filter work.
Is there something I'm missing?
