Question

我正在尝试创建一个动态表格，用户可以在其中按下按钮并更新表格的内容。

代码

extends layout

// Builds a row in the table
mixin tableRowBuilder(modules)
  tr
    for module, index in modules
      td
        if module.name
          +cardBuilder(module.name, module.time, module.location)

// Builds card to be displayed in the table
mixin cardBuilder(name, time, location)
  .card-panel.teal
    span.white-text
      h5= name

      i.material-icons.left alarm
      p= time

      i.material-icons.left place
      p= location

block content

  table#timetable
    thead
      tr
      // Table headers here...  
    tbody

      +tableRowBuilder(morningModules)
      +tableRowBuilder(afternoonModules)      

    script.
      function semesterOneButtonClicked() {

        $('#timetable').empty();
        $('#timetable').addRow(tableRowBuilder(morningModules))
        $('#timetable').addRow(tableRowBuilder(afternoonModules))
      }

目前我收到错误：

ReferenceError: Can't find variable: tableRowBuilder

我假设是因为mixin与script在同一上下文中并不存在。

所以我的问题是：我尝试实现的目标是什么？

Answer 1

在我看来它应该不起作用，因为js执行和jade执行它是不同的阶段和不同的范围，你需要在jade中调用它mixin，将结果保留在一个隐藏元素中，然后从js获取它< / p>

尝试：

extends layout

// Builds a row in the table
mixin tableRowBuilder(modules)
  tr
    for module, index in modules
      td
        if module.name
          +cardBuilder(module.name, module.time, module.location)

// Builds card to be displayed in the table
mixin cardBuilder(name, time, location)
  .card-panel.teal
    span.white-text
      h5= name

      i.material-icons.left alarm
      p= time

      i.material-icons.left place
      p= location

block content

  #morning-modules-row(style='display:none')
      +tableRowBuilder(morningModules)
  #afternoon-modules-row(style='display:none')
      +tableRowBuilder(afternoonModules)

  table#timetable
    thead
      tr
      // Table headers here...  
    tbody

      +tableRowBuilder(morningModules)
      +tableRowBuilder(afternoonModules)      

    script.
      function semesterOneButtonClicked() {

        $('#timetable').empty();
        $('#timetable').addRow($('#morning-modules-row')[0].innerHTML);
        $('#timetable').addRow($('#afternoon-modules-row')[0].innerHTML);
      }

点击按钮调用Jade mixin功能

1 个答案: