Блог

Я прохожу курс CS50 «Веб-программирование на Python и Javascript».

В одном из проектов, которые необходимо выполнить, нужно реализовать платформу социальной сети, где пользователи могут публиковать некоторые тексты, ставить лайки и дизлайки и подписываться на других пользователей.

Пользователь может использовать 3 маршрута:

• Все сообщения,
• Следуя и
• сообщения пользователей.

Я пытался решить эту проблему с помощью интерфейса js. У меня есть функция «view_posts», которая принимает аргумент, указывающий, какие сообщения должны быть извлечены и отображены на HTML-странице. Рассмотрим следующую часть моего js-файла:

 document.addEventListener('DOMContentLoaded', function() {
  username = document.getElementById('username').innerText
  document.querySelector('#posts').addEventListener('click', () => view_posts('all'));
  document.querySelector('#username').addEventListener('click', () => view_posts(username));
  document.querySelector('#following').addEventListener('click', () => view_posts('followers'));
  document.querySelector('#post-form').style.display = "none";

  view_posts('all')
});
  

Извлечение данных в основном работает, но js всегда отображает представление по умолчанию «view_posts (‘all’)». Это означает, что даже если я нажимаю на элемент с идентификатором #post, вызывая ту же самую функцию, включая тот же аргумент, функция вызывается без отображения чего-либо, прежде чем она снова вызовет представление по умолчанию (на этот раз данные будут отображаться правильно).

 function view_posts(selector) {
  // document.querySelector('#post-form').style.display = "none";

  if (selector === 'all') {
    document.querySelector('#header').innerText = "All Posts";
    document.querySelector('#post-form').style.display = "block";
  } else if (selector == 'following') {
    document.querySelector('#header').innerText = "Following";
  } else {
    document.querySelector('#header').innerText = selector;
  }

  fetch(`/network/${selector}`)
    // .then(response => response.text())
    // .then(posts => console.log(posts))
    .then(response => response.json())
    .then(posts => {
      posts.forEach((element) => {
        var item = document.createElement('div');

        item.className = "card";
        item.innerHTML = `<div class="card-body" id="item-${element.id}">
    
            ${element.author} | ${element.timestamp}
            <br>
            ${element.body}
            </div>`;
        document.querySelector('#post-view').append(item);
        // document.getElementById('item-${element.id}').addEventListener('click', () => view_posts(element.author))
      });
    });
  // .catch(console.log.bind(console));
};
  

РЕДАКТИРОВАТЬ: вот мой index.html

 {% extends "network/layout.html" %}
{% load static %}

{% block body %}
<div id="post-view">
  <h2 id="header" style="margin:10px"></h2>
    <div id=post-form>
      <h4>New Post</h4>
      <form>
        <textarea class="form-control" id="compose-body" placeholder="Type here..."></textarea>
        <input onclick="create_post()" type="button" class="btn btn-primary" value="Post"/>
      </form>
  </div>
</div>

{% endblock %}

{% block script %}
<script src="{% static 'network/index.js' %}"></script>
{% endblock %}
  

Чтобы не добавлять

 document.getElementById('post-view').innerHTML = posts.map(element => (
  `<div class="card">
     <div class="card-body" id="item-${element.id}">
       ${element.author} | ${element.timestamp}<br>${element.body}
     </div>
   </div>`).join("");