将值传递给onclick按钮帕格

Question

我正在尝试使用Pug将js函数传递给按钮。我在这里看到了this question，但似乎没有涵盖如何格式化js函数。

我找不到说明如何执行此操作的文档，但也许在pug.org上，我只是不理解。任何指向文档的链接/说明都很好。

无论如何，我有以下内容：

extends layout

block content
 h1=title
  -var itemNumber= 1;
  -function add_fields() {
    -itemNumber++;
    -var objTo = document.getElementById('incomeItems');
    -var divtest = document.createElement("div");
    -divtest.innerHTML = '<div class="label">Item ' + itemNumber +':</div><div class="content"><span>Item Name: <input type="text" style="width:150px;" name="itemName[]" value="" /><small></small></span><span> Income Amount: <input type="number" style="width:60px;" namae="itemAmount[]" value="" /><small></small></span></div>';
    -objTo.appendChild(divtest);
  -}

  form(method='POST' action='')
    div.form-group
      label(for='name') Budget Name:
      input#budget_name.form-control(type='text', placeholder='Such as: New Building Budget' name='name' required='true' value=(undefined===budget ? '' : budget.name) )
    div.form-group#incomeItems
      label(for='income') Income:
      input#income.form-control(type='number', name='income' required='true' value=(undefined===budget ? '' : budget.income) )
  button.btn.btn-primary(type='button' onclick='add_fields()') Add Income Item
    div.form-group
      label(for='expenses') Expenses:
      input#expenses.form-control(type='number', name='expenses' required='true' value=(undefined===budget ? '' : budget.expenses) )
button.btn.btn-primary(type='submit') Submit

if errors 
  ul
    for error in errors
      li!= error.msg

我只能使用script.使其正常工作（也许很好，但我认为可能不是解决此问题的最佳方法？）

extends layout

block content
 h1=title
 script.
      var itemNumber= 1;
      function add_fields() {
          itemNumber++;
          var objTo = document.getElementById('incomeItems');
          var divtest = document.createElement("div");
      divtest.innerHTML = '<div class="label">Item ' + itemNumber +':</div><div class="content"><span>Item Name: <input type="text" style="width:150px;" name="itemName[]" value="" /><small></small></span><span> Income Amount: <input type="number" style="width:60px;" namae="itemAmount[]" value="" /><small></small></span></div>';
      objTo.appendChild(divtest);
  }

  form(method='POST' action='')
    div.form-group
      label(for='name') Budget Name:
      input#budget_name.form-control(type='text', placeholder='Such as: New Building Budget' name='name' required='true' value=(undefined===budget ? '' : budget.name) )
    div.form-group#incomeItems
      label(for='income') Income:
      input#income.form-control(type='number', name='income' required='true' value=(undefined===budget ? '' : budget.income) )
  button.btn.btn-primary(type='button' onclick='add_fields()') Add Income Item
    div.form-group
      label(for='expenses') Expenses:
      input#expenses.form-control(type='number', name='expenses' required='true' value=(undefined===budget ? '' : budget.expenses) )
button.btn.btn-primary(type='submit') Submit

if errors 
  ul
    for error in errors
      li!= error.msg

我在script.处找不到https://pugjs.org/language/code.html，所以我不确定应该如何处理。

Answer 1

在.script中编写客户端JavaScript / jQuery代码非常好。当编译Jade / Pug以生成结果html时，使用'-' at the beginning of a line编写的JavaScript代码应该在服务器端运行。因此，您可以在此处编写代码，例如当您要遍历数组等时，并为数组中的每个项目创建一些相应的html结构。请注意，这是在服务器端完成的，在发送到浏览器的html文件中找不到此循环代码。

但是，script代码旨在结束在浏览器中的html文件中并仅在该文件中执行。因此，将其放置在.script内是完全可以的，它只是将所包含的代码按原样放置在结果html文件的<script></script>标记内。