如何修复Jade语法错误：预期空间？

Question

我继承了一个项目，前一位开发人员决定使用jade进行标记。

不幸的是，我的任务是完成一项简单的任务，即添加我认为简单的改变，并且结果是痛苦。

我试图根据输入值向表行添加一个类，但是当我尝试这样做时，我收到以下错误：

While building the application:
client\views\home\home.jade: Jade syntax error: Expected space
{{{var derp = "derp";}}}
^
packages/compileJade/plugin/handler.js:54:1: Cannot read property 'head' of undefined (compiling client/views/home/home.jade) (at fileModeHandler)

对于我的生活，我无法弄清楚需要什么样的空白区域，这让我非常沮丧。

我已经使用了玉器演示编辑器，我知道我尝试做的事情会起作用，但无论我做什么，当我将它应用到我自己的项目时它都不起作用。到底是我做错了什么？

我包括标记和模板：

home.jade

template(name='home')
  .issues-info.z-depth-2
    h1.title TOTAL ALERTS
    h1.large-number #{issuesLength}

    .last-update
      h2 #{lastUpdateDate}
      h2 #{lastUpdateHour}

    +spinner

  .issues-table
    table.striped
      thead
        tr
          th#customername.sort Customer
          th#devicename.sort Device Name
          th#deviceclass.sort Device Class
          th#servicename.sort Service
          th#date Transition Time
          th#psaticketdetails.sort Ticket #

      tbody
        +each issues
        - var derp = styleClass(servicename)
          tr(class=derp)
            td #{customername}
            td #{devicename}
            td #{deviceclass}
            td #{servicename}
            td #{transitiontime}
            td #{psaticketdetails}

home.js

Session.set('sortField', 'date')
Session.set('descending', true)

Template.home.events({
  'click #date': function () {
    Session.set('descending', !Session.get('descending'))
    Session.set('sortField', 'date')
  }, 

  'click .sort': function (event) {
    Session.set('descending', !Session.get('descending'))
    Session.set('sortField', event.target.id)
  }
})

Template.home.helpers({
    styleClass: function(input){
      if(input == "moo"){
        return "herp";
      } else {
        return "derp";
      }
    },

  lastUpdateDate: function () {
    return Session.get('lastUpdateDate')
  }, 

  lastUpdateHour: function () {
    return Session.get('lastUpdateHour')
  }, 

  issuesLength: function () {
    var issues = Issues.find().fetch(), customers = {}, services = {}

    _.each( Customers.find().fetch(), function (customer) {
        customers[customer.name] = true
      })

    _.each(Services.find().fetch(), function (service) {
        services[service.name] = true
      })

    issues = _.filter(Issues.find().fetch(), function (issue) {
        return customers[issue.customername]
      })

    issues = _.filter(issues, function (issue) {
        return services[issue.servicename]
      })
    return issues.length
  }, 

  issues: function () {
    var issues = Issues.find().fetch(), customers = {}, services = {}

    _.each(Customers.find().fetch(), function (customer) {
        customers[customer.name] = true
      })

    _.each(Services.find().fetch(), function (service) {
        services[service.name] = true
      })

    issues = _.filter(Issues.find().fetch(), function (issue) {
        return customers[issue.customername]
      })

    issues = _.filter(issues, function (issue) {
        return services[issue.servicename]
      })

    var sortField = Session.get('sortField')
    var descending = Session.get('descending')

    if (sortField === 'date') {
      issues.sort(function (a, b) {
        return a.date - b.date
      })
    } else {
      issues.sort(function (a, b) {
        var fieldA = a[sortField].toLowerCase()
        var fieldB = b[sortField].toLowerCase()

       if (fieldA < fieldB) return -1
       else if (fieldA > fieldB) return 1
       else return 0
      })
    }

    if (descending) issues.reverse()

    return issues
  }
});