单击按钮调用 Jade mixin 函数

Question

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

代码

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

尝试：

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 函数

Call Jade mixin function on button click

javascript

mixins

pug