Внедрение DOM в руле - PullRequest
Новая
       8

Внедрение DOM в руле

0 голосов
/ 04 октября 2019

Я пытаюсь выполнить манипулирование DOM на моей странице руля, которая содержит HTML-код для моего одностраничного веб-приложения. Мне нужно извлечь некоторые данные, используя fetch, из моего API маршрутизатора и показать его. Но, как я шел по моей jsфайл начал показывать определенные ошибки: - * выборка не определена * и теперь, когда я требую их, он показывает, что требование не определено. И манипуляция, которую я должен сделать, заключается в том, что в моем файле handlebars я создал неупорядоченный список и в этом элементе списка в качестве шаблона, так что мне нужно получить имя некоторых каналов из моего маршрутизатора api и добавить их в список.

Поскольку dom не работает с рулем, я установил jsdom и сделал манипуляцию, но после выполнения манипуляции он утешает вывод, но не отображает его на странице.

это файл javascript :-( main.js) 

const fetch = require('node-fetch');
const jsdom = require('jsdom');

const { JSDOM } = jsdom;
global.document = new JSDOM(`<div class="root">
<div id="channels-SideBar">
    <h2>Channels</h2>
    <ul id="channels">
        <a href="#">
            <li style="color: white" id="channel">
                <p id="content"></p>
            </li>
        </a>
    </ul>

</div>
<div id="messages">
    <h2>Messages</h2>

</div>
</div>`).window.document;


async function fetchChannel() {
  const channels = await fetch('http://localhost:3400/api/channels');
  const channelsData = await channels.json();
  return channelsData;
}

fetchChannel().then((channel) => {
  const channelNameArray = channelToArray(channel);
  displayChannelNames(channelNameArray);
});

function channelToArray(channels) {
  const channelArray = [];
  channels.forEach((element) => {
    channelArray.push(element);
  });
  return channelArray;
}

function displayChannelNames(channelNameArray) {
  const unorderedList = document.querySelector('#channels');
  const channel = document.querySelector('#channel');
  // console.log(channel);


  channelNameArray.forEach((individualChannel) => {
    const newChannel = channel.cloneNode(true);
    const channelName = newChannel.querySelector('p');

    channelName.textContent = individualChannel.name;


    channelName.setAttribute('channelId', individualChannel.id);
    unorderedList.appendChild(newChannel);
  });
  console.log(unorderedList);
}

это руль, содержащий мой html :-( mainPage.handlebars) 

<div id="channels-SideBar">
        <h2>Channels</h2>
        <ul id="channels">            
                <li style="color :green;" id="channel">
                    <p id="content"></p>
                </li>            
        </ul>
    </div>

, а это мой main.handlebar: - 

<html lang="en">
<head>

    <title>RestAPI Project</title>
        <link href="../stylesheet/style.css" rel="stylesheet" />

</head>

<body>
    {{{body}}}
      <script type="module" src="../javascripts/main.js"></script>
</body>


</html>

он добавляет элемент списка, когда я записываю на консоль вывод, но новый список не отображается.

...