Передача значений на кнопку мопса - PullRequest
Новая
       11

Передача значений на кнопку мопса

0 голосов
/ 04 февраля 2019

Я пытаюсь передать функцию js кнопке с помощью Pug.Я видел этот вопрос здесь, но, похоже, он не охватывает, как отформатировать функцию js.

Я не смог найти документацию, объясняющую, как это сделать, но, возможно, он на pug.а я просто орг не понимаю.Любые ссылки на документацию / объяснения были бы хороши.

В любом случае, у меня было следующее: 

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, поэтому я не уверен, как я должен былиди об этом.Спасибо!

1 Ответ

0 голосов
/ 05 февраля 2019

Отлично писать свой код JavaScript / jQuery на стороне клиента внутри .script.Код JavaScript, который вы пишете с помощью '-' at the beginning of a line, должен выполняться на стороне сервера, когда Jade / Pug компилируется для получения результирующего HTML.Таким образом, вы можете написать здесь код, например, когда вы хотите перебрать массив и т. Д., И создать некоторую соответствующую HTML-структуру для каждого элемента в массиве.Обратите внимание, что это делается на стороне сервера, этот код зацикливания нигде не будет найден в HTML-файле, который отправляется в браузер.

Но код script предназначен дляhtml файл в браузере и только там исполняется.Таким образом, совершенно нормально поместить его в .script, который просто помещает содержащийся код, как он есть внутри <script></script> тегов, в результирующий HTML-файл.

...