Использование jquery для доступа к ключу схемы Mongoose (Boolean), для которого задано значение attr, но возвращается неопределенное значение

Question

Я использую node / express и после рендеринга файла .pug, приведенного ниже, я отправляю ему коллекцию объектов Mongoose под переменной 'tasks'.В теге привязки с классом 'task-link' я могу установить для атрибута id значение mongoose _id, а также пытаюсь создать атрибут с именем 'complete' и присвоить ему значение ключа 'Completed',который является логическим объектом в моей схеме Мангуста.Однако, когда я получаю доступ к атрибуту «complete» с помощью jquery, он отображается как неопределенный.Я не уверен, почему это так, учитывая, что я могу получить доступ к идентификатору просто отлично.Любая помощь будет оценена.

JQUERY:

$(function(){
  $('a.task-link').hover(function(){
    if($(this).attr('completed')){
      let id = $(this).attr('id');
      $(this).append("<a href='/profile/delete/"+ id + "'>  Remove<a>");
    }
    },
    function () {
      if($(this).attr('completed')){
        $(this).find("a").remove();
      }
    });
});

Pug:

extends layout

block content
  div#main
    h1=title
    div
      ul
        each task in tasks 
          li.task-item 
            a.task-link(id=task._id, completed=task.Completed, href='/profile/switch/'+task._id, method='get') #{task.Description}
        else 
          li You don't have any tasks!
      
      form#add(action='/profile/add', method='post')
        input#task-text(type='text', name='task_text')
        input#add-btn(type='submit', value='Add Task')
        br
      a#logout(href='/logout', method='get') Logout

Answer 1

Я разобрался в своей проблеме.task.Completed возвращал булев объектпреобразовал логическое значение в строку в pug и установил это как мой атрибут:

-var toggle = task.Completed ? 'true' : 'false'

Answer 2

Вы должны использовать атрибут data- * для неподдерживаемых атрибутов.

Также при проверке строки на булево значение необходимо сравнить со значением. Если вы просто проверяете, если (stringval), вы сравниваете с нулевым или неопределенным. если он определен, он вернет true.

JQUERY:

$(function(){
  $('a.task-link').hover(function(){
    if($(this).data('completed') == true){
      let id = $(this).attr('id');
      $(this).append("<a href='/profile/delete/"+ id + "'>  Remove<a>");
    }
    },
    function () {
      if($(this).data('completed') == true){
        $(this).find("a").remove();
      }
    });
});

Pug:

extends layout

block content
  div#main
    h1=title
    div
      ul
        each task in tasks 
          li.task-item 
            a.task-link(id=task._id, data-completed=task.Completed, href='/profile/switch/'+task._id, data-method='get') #{task.Description}
        else 
          li You don't have any tasks!
      
      form#add(action='/profile/add', method='post')
        input#task-text(type='text', name='task_text')
        input#add-btn(type='submit', value='Add Task')
        br
      a#logout(href='/logout', method='get') Logout