当前位置：首页 > news >正文

实现书签-第一部分

news 来源：原创 2025/5/17 8:08:57

实现书签-第一部分

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

在此之前，让我们修复一下之前的功能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，用来监听

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

  //当点击加入书签按钮时，调用handleraddHandlerAddBookmark(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 设置为 trueif (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); //更新视图
};