本文分享了我使用SvelteKit完成DevChallenges.io项目“简单咖啡列表”的经验。在此之前，我要感谢大家对之前文章的支持！这次，我尝试使用SvelteKit框架，因为它与我之前使用的PHP框架截然不同，并希望扩展我的JavaScript技能。
我选择DevChallenges.io是因为它提供了设计良好的项目，方便上手。这个单页面项目花了我几天时间，大部分时间都花在了Windows 10环境的配置和Svelte切换组件的构建上。Svelte的文档非常棒，极大地帮助了我。
设计方面，我需要一个卡片组件和一个切换组件（使用单选按钮实现）。为了默认选中第一个选项，我为绑定设置了初始状态。
page.svelte 代码片段:
import Card from '$lib/components/card/card.svelte'; import Toggle from '$lib/components/toggle/toggle.svelte'; let { data } = $props; // 数据来自 +page.server.js let fullcatalog = Array.from(data.item); // 将对象转换为数组 let filteredcatalog = fullcatalog.filter(coffee => coffee.id !== 5); const options = [ { value: 'all-products', label: '所有产品' }, { value: 'available-now', label: '现货' }, ]; let radiovalue = $state(options[0].value); // 默认单选按钮值 {#if radiovalue === '' || radiovalue === 'all-products'} {#each fullcatalog as { id, name, image, popular, price, rating, votes }} {/each} {:else} {#each filteredcatalog as { id, name, image, popular, price, rating, votes }} {/each} {/if}
我从+page.server.js获取数据，并创建了两个数组：fullcatalog和filteredcatalog。我本想用skip或continue在循环中过滤数据，但发现Svelte的{#each}不支持这些关键字。
toggle.svelte 代码片段:
let { options, userchoice = $bindable(options[0].value) } = $props; const slugify = (str = "") => str.toLowerCase().replace(/ /g, "-").replace(/./g, ""); const uniqueid = Math.floor(Math.random() * 100); {#each options as { value, label }} {/each}
这里使用了bind:group来处理单选按钮组。虽然只有两个选项，但我保留了扩展性的设计。
在page.svelte中，根据radiovalue的值来渲染不同的咖啡列表。
Card.svelte 代码片段 (简化):
let { coffeeId, coffeeName, coffeeImg, coffeePopular, coffeePrice, coffeeRating, coffeeVotes } = $props; @@##@@ {coffeeName}
{coffeePrice}
卡片组件负责展示每个咖啡的信息。
改进空间:
我不确定$bindable在切换组件中的作用，因为它似乎与page.svelte中的值重复。我想改进数据获取和选项管理的方式。我计划在未来的项目中改进布局和添加动画。
项目已部署在Netlify上，代码在GitHub上。 [Netlify链接] [GitHub链接] (请替换为实际链接)
希望这个分享对大家有所帮助！
以上就是与Sveltekit挑战Devchallengesio的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501266.html
微信扫一扫 
支付宝扫一扫 
