Anruf Jade Mixin Funktion auf Knopf klicken

Question

Ich versuche, eine dynamische Tabelle zu erstellen, wo der Benutzer eine Taste drücken kann und der Inhalt der Tabelle aktualisiert wird. Derzeit

-Code

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)) 
     } 

aber ich bekomme die Fehlermeldung:

ReferenceError: Can't find variable: tableRowBuilder 

Was ich gehe davon aus, weil die mixin nicht im gleichen Kontext wie die script ist.

Also meine Frage ist: Ist was ich versuche zu erreichen?

Answer 1

meiner Meinung nach sollte es nicht funktionieren, weil js Ausführung und Jade Ausführung es unterschiedliche Stufen und unterschiedliche Bereiche ist, müssen Sie es Mixin in Jade nennen, um das Ergebnis in einem versteckten Element zu lassen und später bekommen es von js

Versuch:

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); 
     }