Пытаясь сделать тайм-лейт с pugjs и momentjs - PullRequest
Новая
       10

Пытаясь сделать тайм-лейт с pugjs и momentjs

0 голосов
/ 30 октября 2018

Я пытаюсь сделать timeleft в шаблонном движке pugjs и библиотеке моментов.

В Add_post.pug клиент выбирает продолжительность сообщения (например, Один день, Одна неделя (7 дней) или около того) 

 #form-group
    label Duration (Days):
    select.form-control(name='time')
        option.form-control(name='1', value='1') 1 Day
        option.form-control(name='7', value='7') 7 Days
        option.form-control(name='10', value='10') 10 Days

Я могу получить день, а затем сохранить дату и время отправки в mongodb, например, из server.js: 

    var time= req.body.time*60*60*24;
    article.time= time;
    article.duration= moment().startOf('second');

Я застрял, чтобы показать это время в моем представлении article.pug: 

extends layout
block content
  script(src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment-with-locales.min.js')
  script(src='https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js')   
  ul
    each article, i in articles
      li.list-group-item
        #year
        .box
          .unit Days
          .value
        .box
          .unit Hours
          .value
        .box
          .unit Minutes
          .value
        .box
          .unit Seconds
          .value
- var timeVar = article.time
- var duration= article.duration
script(type='text/javascript', src='/timeleft.js').tick(timeVar , duration);

И это timeleft.js: 

   moment().format()
    moment.locale('en-gb')
    function tick(timeVar , duration) {
        var now = Date.now()
        var nextSecond = 1000 - now % 1000
        var year = document.getElementById('year').querySelectorAll('.value')
        var yearArray = moment.duration(duration.diff(now - 1000, 'seconds') + 
        timeVar, 'seconds').format('d H m s', { trim: false }).split(' ')
            yearArray.forEach(function (value, i) {
                if (i === 0) {
                    year[i].textContent = ('00' + value).slice(-3)
                } else {
                    year[i].textContent = ('0' + value).slice(-2)
                }
            })
        setTimeout(tick, nextSecond)
    }

Я получаю ошибку duration.diff не является функцией. Что я сделал не так? У меня есть setInterval для автоматического удаления статьи после выбранного дня, но единственное, что мне нужно, это показать этот временной интервал в режиме просмотра мопса.

Я получил код временной шкалы по этой ссылке https://codepen.io/pakastin/pen/GNgqMp?editors=0010 и настроил так, как мне нужно ..

1 Ответ

0 голосов
/ 30 октября 2018

Вы путаете сгенерированный тег сценария (который загружается в браузер и загружается или выполняется там) и переменную, которая существует в шаблоне pug.

Итак, эта строка загружает только скрипт timeleft в браузер, и он никогда не будет доступен в шаблоне: 

script(type='text/javascript', src='/timeleft.js').tick(timeVar , duration);

Если вы действительно хотите импортировать что-то в шаблон pug (по моему опыту, вы должны делать это ОЧЕНЬ редко), вам нужно добавить эту переменную в app.locals в вашем файле app.js. Вот как бы вы это сделали: 

app.locals.timeleft = require('/timeleft.js');

После этого вы сможете сделать это в шаблоне: 

timeleft.tick(timeVar , duration);

Гораздо лучший способ сделать это - рассчитать временной интервал в маршруте и передать переменную в шаблон. Это исключает всю логику из шаблона, где (как вы видите) написать сложный код нелегко, а шаблон ориентирован только на рендеринг HTML.

...