是什么導致在 Laravel 8 應用程序中使用 jScroll 失敗？

Question

賞金將在 3 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Razvan Zamfir希望引起對這個問題的更多關注。

我正在開發 Laravel 8 中的博客應用程序。

ArticlesController controller 我有這種方法來顯示單篇文章及其評論：

class ArticlesController extends FrontendController {

    // More code

    public function show($slug) {
        // Single article
        $article = Article::firstWhere('slug', $slug);
        $old_article = Article::where('id', '<', $article->id)->orderBy('id', 'DESC')->first();
        $new_article = Article::where('id', '>', $article->id)->orderBy('id', 'ASC')->first();

        // Comments
        $commentsQuery = Comment::where(['article_id' => $article->id, 'approved' => 1])->orderBy('id', 'desc');
        $comments = $commentsQuery->paginate(10);
        $comments_count = $commentsQuery->count();

        return view('themes/' . $this->theme_directory . '/templates/single', 
            array_merge($this->data, [
                'categories' => $this->article_categories,
                'article' => $article,
                'old_article' => $old_article,
                'new_article' => $new_article,
                'comments' => $comments,
                'comments_count' => $comments_count,
                'tagline' => $article->title,
                ])
            );
    }

}

在視圖中，我有這個評論列表：

<div id="commentsList">
  <ol class="commentlist">
    @foreach ($comments as $comment)
    <li class="depth-1 comment">
      <div class="comment__avatar">
        <img class="avatar" src="{{ asset('images/avatars/' . $comment->user->avatar) }}" alt="" width="50" height="50">
      </div>
      <div class="comment__content">
        <div class="comment__info">
          <div class="comment__author">{{ $comment->user->first_name }} {{ $comment->user->last_name }}</div>
          <div class="comment__meta">
            <div class="comment__time">{{ date('jS M Y', strtotime($comment->created_at)) }}</div>
            <div class="comment__reply">
              <a class="comment-reply-link" href="#0">Reply</a>
            </div>
          </div>
        </div>
        <div class="comment__text">
          <p>{{ $comment->body }}</p>
        </div>
      </div>
    </li>
    @endforeach
  </ol>

  {{ $comments->links() }}
</div>

目標

我想在jScroll的幫助下用“無限滾動”替換評論分頁。

為此，我有：

$('#commentsList nav').hide();
$(function() {
    $('#commentsList').jscroll({
        autoTrigger: true,
        loadingHtml: '<span>Loading...</span>',
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: '.commentlist > li',
        callback: function() {
            $('#commentsList nav').remove();
        }
    });
});

問題

上面的代碼應該 append 將<li class="depth-1 comment"></li>元素添加到<ol class="commentlist"><ol> ，但它會執行以下操作：

• 將加載的列表項包裝在<div class="jscroll-added"></div>
• 將<div class="jscroll-added"></div>元素放在評論列表下方而不是其中。

問題

1. 是什么導致了這個錯誤？
2. 最簡單的解決方法是什么？

Answer 1

我認為主要問題是它沒有得到復雜的選擇器。 它顯然不能與 ol 元素一起使用（因此對於每個新請求，數字將一次又一次地從 1 開始）。 僅使用 div 可以避免此類問題。

我設法通過以下步驟實現了您想要的結果：

1.將 {{ $comments->links() }} 移動到 ol 元素中（因此可以在每個新請求中使用它）。

2.僅將 contentSelector 更改為“.commentlist”。

contentSelector: '.commentlist',

3.回調function變為：

callback: function() {
    $('#commentsList nav').remove();
    var content = $('.jscroll-added').contents().unwrap().html();
    $('ol.commentlist:first').append(content);
    $('ol.commentlist').not(':first').remove();
}

這樣，它會將 li 元素 append 帶到現有的 ol 並擺脫新創建的 ol。

干杯