Last active
June 12, 2021 19:13
-
-
Save marcus-at-localhost/55309fcb81c848c1de3bad80eb3b8308 to your computer and use it in GitHub Desktop.
[How to initialize an Alpine.js component in Unpoly.js] Alpine initializes itself after pageload, but what if the page comes out of unpoly's cache? Based on this: https://gist.github.com/marcus-at-localhost/68cbf0e637a39ddeca59199b717d46cb #alpinejs #unpolyjs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
up.compiler('#gists-listing', function(element) { | |
// https://github.com/alpinejs/alpine/issues/359#issuecomment-614623246 | |
Alpine.initializeComponent(element); | |
return function() { | |
console.log('Destroy Alpine Nodes? Does this take care of it: https://github.com/alpinejs/alpine/pull/174/commits/8001e12f9155c0c9ef4f4e3ccb885b4f17e04915 ?') | |
}; | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/npm/alpinejs@latest/dist/alpine.min.js"></script> | |
<div id="gists-listing" x-data="gistsData()" x-init="init()"> | |
<dl class="list-reset flex flex-col"> | |
<template x-for="gist in gists" :key="gist.id"> | |
<div><!-- needs to be wrapped in an element --> | |
<dt> | |
<a x-bind:href="gist.html_url" x-text="gist.parsed.title"></a> | |
</dt> | |
<dd x-text="gist.parsed.description"></dd> | |
</div> | |
</template> | |
</dl> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment