实现书签-第一部分

news2025/5/17 21:05:41

实现书签-第一部分

本节我们将实现书签功能，为菜谱点击类似于收藏的功能，然后可以在上方的书签找到我们所有收藏的书签；

在此之前，让我们修复一下之前的功能BUG，当我们搜索的时候，下面分页始终保持在上一次的页数中

在这里插入图片描述

重新搜索这个也不会改变成第一页

我们只需要在每次搜索的时候，将其页面置为1即可

在这里插入图片描述

现在我们来处理关于书签的功能，首先在状态管理中，我们将书签定义为一个空的数组

export const state = {
  recipe: {},
  search: {
    query: '',
    results: [],
    page: 1,
    resultsPerPage: RES_PER_PAGE,
  },
  bookmarks: [],
};

export const addBookmark = function (recipe) {
  // 添加书签
  state.bookmarks.push(recipe);

  // 在当前 recipe 中添加 bookmarked 属性
  if (recipe.id === state.recipe.id) state.recipe.bookmarked = true;
};

const controlAddBookmark = function () {
    //添加书签
    model.addBookmark(model.state.recipe);
    console.log(model.state.bookmarks);
};

这时候我们需要处理在什么时候去处理呢，我们去视图中进行处理

      <button class="btn--round btn--bookmark">
            <svg class="">
              <use href="${icons}#icon-bookmark"></use>
            </svg>
          </button>
        </div>
//增加一个class，用来监听

还是用事件委托的方式在处理点击的事情触发

  //当点击加入书签按钮时，调用handler
  addHandlerAddBookmark(handler) {
    this._parentElement.addEventListener('click', function (e) {
      const btn = e.target.closest('.btn--bookmark');
      if (!btn) return;
      handler();
    });
  }

之后我们在控制器中来调用这个方法

const init = function () {
  recipeView.addHandlerRender(controlRecipes);
  recipeView.addHandlerUpdateServings(controlServings);
  recipeView.addHandlerAddBookmark(controlAddBookmark);
  searchView.addHandlerSearch(controlSearchResults);
  paginationView.addHandlerClick(controlPagination);
};

之后我们测试一下，当我们点击之后，bookmarked会被设置为true

在这里插入图片描述

之后我们来改变点击之后书签的样式，当为真时，改变class，以此来改变样式

 <button class="btn--round btn--bookmark">
            <svg class="">
              <use href="${icons}#icon-bookmark${
      this._data.bookmarked ? '-fill' : ''
    }"></use>
            </svg>
          </button>
        </div>

之后我们点击之后需要更新一下视图

const controlAddBookmark = function () {
  //添加书签
  model.addBookmark  (model.state.recipe);
  console.log(model.state.bookmarks);
  recipeView.update(model.state.recipe); //更新视图
};

在这里插入图片描述

但现在当我们的视图进行更新之后，状态无法进行保留，我们需要在加载食谱的时候检测一下

    // 检查当前 recipe 是否被书签,如果是,则将 bookmarked 设置为 true
    if (state.bookmarks.some(bookmark => bookmark.id === id)) {
      state.recipe.bookmarked = true;
    } else {
      state.recipe.bookmarked = false;
    }

现在我们做一个相反的东西，即删除书签，还是一样，在model添加删除书签的方法

export const deleteBookmark = function (id) {
  // 删除书签
  const index = state.bookmarks.findIndex(el => el.id === id);
  state.bookmarks.splice(index, 1);

  // 在当前 recipe 中添加 bookmarked 属性
  if (id === state.recipe.id) state.recipe.bookmarked = false;
};

这个方法仍然需要在控制器中调用，可以直接使用增加书签的函数功能

const controlAddBookmark = function () {
  //添加书签
  if (!model.state.recipe.bookmarked) model.addBookmark(model.state.recipe);
  else model.deleteBookmark(model.state.recipe.id);
  console.log(model.state.bookmarks);
  recipeView.update(model.state.recipe); //更新视图
};