点击按钮调用Jade mixin功能

Call Jade mixin function on button click

本文关键字：mixin 功能 Jade 调用 按钮      更新时间：2023-09-26

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

代码

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不在同一上下文中。

所以我的问题是：我努力实现的目标可能吗？

在我看来，它不应该工作，因为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);
      }
相关文章：