Блог

на этом я наткнулся на пень. Новичок в jQuery, и я просмотрел документы jQuery, stackoverflow и другие поисковые запросы Google, но, похоже, они слишком специфичны для этого кода. Я пытаюсь включить событие щелчка по имени пользователя в ленте, которое показывает только твиты пользователя в ленте, а затем возвращается к исходному каналу с помощью кнопки «Назад».

 var $refreshButton = $('<button id="update-feed"></button>');
$refreshButton.on('click', function() {
  displayFeed();
});
$refreshButton.appendTo($app);
var $feedPage = $('<div id="feed"></div>');
$feedPage.appendTo($app);

function displayFeed() {
    $feedPage.text('Your Nest');
    $refreshButton.text('Update Feed');
    generateTweets(streams.home);
  }

  function generateTweets(tweets) {
    $tweets.html('');
    var index = tweets.length - 1;
    while(index >= 0){
      var tweet = tweets[index];
      renderTweets(tweet);
      index -= 1;
    }
    $('.username').click(function(event) {
      handleUsernameClick($(event.target).text());
    });
  }

  function renderTweets(tweet) {
    var $tweet = $('<div class="tweets"></div>');
    $tweet.append('<img class="profile-photo" src="./assets/img/'  tweet.user  '.png">')
    $tweet.append('<br>');
    $tweet.append('@'   '<a class="username">'   tweet.user   '</a>'   ': ');
    $tweet.append('<br>');
    $tweet.append('<span class="message">'   tweet.message   '</span>');
    $tweet.append('<br>');
    $tweet.append('<i class="far fa-comment"></i>');
    $tweet.append('<i class="far fa-thumbs-up"></i>');
    $tweet.append('<i class="fas fa-retweet"></i>');
    $tweet.append('<i class="fas fa-share"></i>');
    $tweet.append('<br>');
    var $timeStamp = $('<div class="timestamp"></div>');
    var time = $('<time class="timeago" datetime="">'  tweet.created_at  '</time>');
    $timeStamp.append($("time.timeago").timeago());
    //$timeStamp.append($time);
    $timeStamp.appendTo($tweet);
    $tweet.append('<br>');
    $tweet.appendTo($feedPage);
  }

  function generateTweets(tweets) {
    var index = tweets.length - 1;
    while(index >= 0){
      var tweet = tweets[index];
      renderTweets(tweet);
      index -= 1;
    }
    $('.username').click(function(event) {
      handleUsernameClick($(event.target).text());
    });
  }

  function handleUsernameClick(tweet) {
    // var storedUser = streams.users[tweet];
    // renderFeed(storedUser);
    renderTweets(streams.users[tweet]);
    $refreshButton.text('Back');
    $refreshButton.on('click', function(event) {
      displayFeed();
    })
  }


  // function renderFeed(tweet) {
  //   if (Array.isArray(tweet)) {
  //     for (var i = 0; i < tweet.length; i  ) {
  //       var userObj = tweet[i];
  //       return renderTweets(userObj);
  //     }
  //     console.log(renderFeed([{user: 'bob', message: 'hi'}, {user:'jane', message: 'bye'}]))
  //   }
  // }

  displayFeed();
 

Теперь я заметил, что при нажатии на имя пользователя регистрируется массив объектов для этого конкретного имени пользователя, но я не могу правильно получить доступ к объекту renderTweets . Моя идея заключается в том, что я не передаю правильный аргумент для параметра, но мне не удалось использовать правильный, или, возможно, он ошибается где-то еще.

.gif демо-версии

Кроме того, я пытаюсь использовать https://timeago.yarp.com/ чтобы добавить временную метку, похожую на твиттер, на твит, и я считаю, что неправильно понимаю, как это понимать в этом коде.

Если кто-нибудь сможет объяснить решение этой проблемы, чтобы помочь мне понять, в чем я ошибаюсь/как исправить. Я был бы вам очень признателен.