[実践1]ページングの実施

8903 ワード

1.ページの値を記憶する
現在のページの位置値を記憶する変数値を持つ必要があります.
ステータス値はグローバルに管理する必要があるため、グローバル変数として宣言します.
const store = {
  currentPage: 1
}
2.ページUIの作成
function newsFeed() {
// ...
  newsList.push(`
    <div>
      <a href="#/page/${store.currentPage - 1}">이전 페이지</a>
      <a href="#/page/${store.currentPage + 1}">다음 페이지</a>
    </div>
  `);
  containerEl.innerHTML = newsList.join("");
3.ルーティング経路構造の取得
function newsFeed() {
	// ...
for (let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++) {
    newsList.push(`
      <li>
        <a href="#/show/${newsFeed[i].id}">
          ${newsFeed[i].title}(${newsFeed[i].comments_count})
        </a>
      </li>
    `);
  }
  // ...
}

function newsDetail() {
  //...
  containerEl.innerHTML = `
    <h1>${newsContent.title}</h1>
    <div>
      <a href="#/page/${store.currentPage}">목록으로</a>
    </div>
  `;
  //...
}

function router() {
  const routePath = location.hash;

  if (routePath === "") {
    newsFeed();
  } else if (routePath.indexOf("#/page/") >= 0) {
    const page = Number(routePath.substr(7));
    store.currentPage = page;
    newsFeed();
  } else {
    newsDetail();
  }
}