alpine-turbo-drive-adapter
Version:
Bridge library to enable full support for Alpine components in pages using Turbolinks/Turbo Drive
37 lines (29 loc) • 919 B
HTML
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo/dist/turbo.es2017-umd.min.js"></script>
<script src="/dist/alpine-turbo-drive-adapter.js" defer></script>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<a href="/tests/res/turbo/mutation/target.html">Go to target</a>
<div x-data="{ foo: 'bar', open: true }">
<template x-if="open">
<span x-text="foo"></span>
</template>
</div>
<button onclick="addElement()">Add</button>
<div id="container">
</div>
<script>
function addElement() {
var div = document.createElement("div");
div.innerHTML = `<p x-data="{ open: true }">
<template x-if="open">
<span>Test</span>
</template>
</p>`;
document.getElementById('container').appendChild(div);
}
</script>
</body>
</html>