Skip to content

Instantly share code, notes, and snippets.

@anjanesh

anjanesh/alpinejs-global-storage.html

Last active February 28, 2023 18:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anjanesh/86084b837bf6bc6acc43cbbbf923992f to your computer and use it in GitHub Desktop.
Save anjanesh/86084b837bf6bc6acc43cbbbf923992f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
alpinejs-global-storage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Div Form using Global Apline Storage Variable</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.10.5/dist/cdn.min.js" defer></script>
<script>
let content = [
{ name: 'Test 1', description: 'Test Description 1' },
{ name: 'Test 2', description: 'Test Description 2' },
{ name: 'Test 3', description: 'Test Description 3' },
{ name: 'Test 4', description: 'Test Description 4' },
{ name: 'Test 5', description: 'Test Description 5' },
];
document.addEventListener("alpine:init", () =>
{
Alpine.store('global_data',
{
data: content,
push(name, description)
{
this.data.push({name, description});
},
});
});
const push = (name, description) =>
{
Alpine.store('global_data').push(name, description);
}
</script>
</head>
<body>
<div class="container mt-5">
<div x-data="{}">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" name="name" class="form-control" minlength="1" placeholder="Name" />
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<input type="text" id="description" name="description" class="form-control" minlength="1" placeholder="Description" />
</div>
<div class="mb-3">
<button type="submit" x-on:click="$store.global_data.push(document.getElementById('name').value, document.getElementById('description').value);" class="btn btn-primary">Add</button>
</div>
<hr/>
<div class="table" style="display: table">
<template x-for="(d, i) in $store.global_data.data" :key="Date.now() + Math.floor(Math.random() * 1000000)">
<div style="display: table-row">
<div style="display: table-cell" x-text="i + 1"></div>
<div style="display: table-cell" x-text="d.name"></div>
<div style="display: table-cell" x-text="$store.global_data.data[i].description"></div>
</div>
</template>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment