Блог

Я новичок в веб-разработке и использую gulp для своего проекта, который обслуживает index.html страницу во время сборки.

Я использую pug в качестве шаблона для генерации html .

gulfile.js

 const bundler = () => {
  return rollup({
    input: './src/scripts/main.js',
    plugins: [
      babel(pkg.babel),
      nodeResolve(),
      commonJS(),
    ],
  }).then((bundle) => bundle.write({
    file: '.tmp/bundle.js',
    format: 'umd',
    sourceMap: 'inline',
  }));
};

// Uses PUG as template
const templates = (env) => () => {
  return src('./src/templates/*.pug')
      .pipe(plugins.pug({locals: {
        title: pkg.title,
        description: pkg.description,
        env,
      }}))
      .pipe(dest('dist'))
      .pipe(plugins.size({title: 'templates'}));
};

...

exports.serve = series(
    bundler,
    styles,
    templates('development'),
    images('development'),
    serve
);
 

Теперь это мой

main.js:

 import dispatchForm from './modules/dispatchForm';

const domContentLoad = (fn) => {
  if (document.readyState !== 'loading') fn();
  else document.addEventListener('DOMContentLoaded', fn);
};

domContentLoad(() => {
  dispatchForm();
});
 

И это мой модуль, который экспортирует функцию для обработки взаимодействия с пользователем в index.html :

dispatchForm.js

 const button = document.querySelector('[data-calculator-button]');

function updateValue() {
  const gain  = document.querySelector('[data-calculator-form][name="gain"]:checked');
  const cost  = document.querySelector('[data-calculator-form][name="cost"]:checked');

  if (gain amp;amp; cost) {
    button.removeAttribute('disabled');
    button.classList.remove('selectors__button--inactive');
  } else {
    button.setAttribute('disabled', '');
    button.classList.add('selectors__button--inactive');
  }
  console.log(gain, cost)

}

function dispatchForm() {
  const radioInput = document.querySelectorAll('[data-calculator-form]');
  radioInput.forEach(element => element.addEventListener('input', updateValue));
}

export default dispatchForm;
 

Теперь, во время выполнения, мне нужно получить значения с помощью кнопки отправки и отобразить другой шаблон pug с помощью «rollup-plugin-pug».

Я пытаюсь создать другой JavaScript модуль для этой обработки и рендеринга:

calculateButton.js

 // modules/calculateButton.js
import templateFn from '../../templates/partials/field.pug';
 
const button = document.querySelector('[data-calculator-button]');


button.addEventListener('click', (e) => {
   if (e.target.getAttribute('disabled')) return;
   const gain  = document.querySelector('[data-calculator-form][name="gain"]:checked').value;
   const cost  = document.querySelector('[data-calculator-form][name="cost"]:checked').value;
  
  document.getElementById("result").innerHTML = templateFn({
    gain, cost
  });
  console.log(templateFn())
});
 

и

field.pug

 //- template.pug
.content
  p= gain
  p= cost
 

Но ничего не отображается, когда я нажимаю кнопку и отправляю свои значения. Все, что я вижу в URL-адресе браузера, если я нажимаю на 130 радио:

 http://localhost:3000/?gain=pointsamp;cost=130
 

Я следил за этой документацией: https://www.npmjs.com/package/rollup-plugin-pug

Но рендеринга нет. Чего мне не хватает? Есть идеи? Как мне выполнить консоль.зарегистрируйте этот щелчок, по крайней мере, чтобы я мог его проверить?