第一篇文章，我目前正在做一个Web项目，我使用Alpine.js来实现一些动态功能。在我的项目中，我有一个购物车功能，我想在我的网页上显示购物车中物品的总价。
下面是我的HTML代码的简化版本：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and CSS imports -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>YMRESTKOMBYEN</title>
<!-- Customized Tailwind CSS and Alpine.js -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Custom color variables */
:root {
--color-bg: #422931;
--color-text: #ffffff;
--color-accent: #09da6b;
}
body {
background-color: var(--color-bg);
}
.text-primary {
color: var(--color-text);
}
.btn-primary {
background-color: var(--color-accent);
color: var(--color-text);
}
</style>
<!-- Alpine.js script import -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body class="px-3 font-sans leading-normal tracking-normal" x-data="loadMotorcycles()" x-data="{totalCart:0">
<!-- Header -->
<header class="bg-gray-900 text-white py-6">
<!-- ... (header code) ... -->
</header>
<!-- Main content container -->
<div class="container pt-8 mx-auto" x-cloak>
<!-- Search input -->
<input x-ref="searchField" x-model="search" placeholder="Rechercher par marque ou modèle..." type="search"
class="block w-full bg-gray-800 focus:outline-none focus:bg-gray-900 focus:shadow text-white font-bold rounded-lg px-4 py-3 text-primary">
<!-- Sorting dropdown -->
<div class="mt-4">
<label class="block text-gray-100 text-sm font-bold mb-2">Trier par :</label>
<select x-model="sortOption"
class="block w-full bg-gray-800 focus:outline-none focus:bg-gray-900 focus:shadow text-white font-bold rounded-lg px-4 py-3 text-primary">
<!-- ... (sorting options) ... -->
</select>
</div>
<!-- Motorcycle list -->
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<template x-for="moto in sortedMotorcycles" :key="moto.id">
<div
class="flex items-center shadow hover:bg-gray-700 hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform hover:scale-105 p-3 bg-gray-800"
@click="totalCart += moto.prix">
<!-- ... (motorcycle details) ... -->
</div>
</template>
</div>
</div>
<!-- JavaScript section -->
<script>
// Sample motorcycle data
var sourceData = [
// ... (motorcycle json format data) ...
];
// Function to load and manipulate motorcycle data
function loadMotorcycles() {
return {
search: '',
sortOption: 'default',
myForData: sourceData,
get sortedMotorcycles() {
// ... (sorting and filtering logic) ...
}
}
}
</script>
</body>
</html>我意识到在主体中同时使用变量totalCart和函数loadMotorcycles作为x-datas是不可能的，我是AlpineJS的新手，我试过文档，但我真的不知道如何掌握它。
我很想知道如何进行，并随时提出任何问题。
非常感谢。
1条答案
按热度按时间8wtpewkr1#
您可以简单地将 totalCart 变量添加到主x-data JSON中：
你也可以把 loadMotorcycles（） 重命名为一个更通用的名字。
您还可以将逻辑拆分为多个Alpine.js组件，每个组件都有自己的 x-data。
子组件可以访问父组件的数据，否则组件可以使用自定义事件相互交互
我也建议你使用Alpine.js的第3版：here一些细节。