JavaScript’te Reaktiviteye Pratik Alternatif: Alpine.js

AlpineJS, HTML içinde kullanabilen, reaktif olarak DOM işlemleri yapabileceğiniz ufak bir framework.

Şunu sayfaya dahil edip başlayabilirsiniz:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>

1. Örnek:

<div x-data="{message: 'Hello world!'}">
  <h1 x-text="message"></h1>
  <input type="text" x-model="message">
</div>

2. Örnek:

   <div x-data="{items: ['first', 'second']}">
   <template x-for="item in items" :key="item">
       <div>
           <span x-text="item"></span>
       </div>
   </template>
   </div>

3. Örnek:

   <div x-data="{open: false, toggle() { this.open = !this.open }}">
   <button @click="toggle()">
       <span x-text="open ? 'Kapat' : 'Aç'"></span>
   </button>
   <div x-show="open">
       Görüntülenecek olan içerik
   </div>
   </div>

Daha detaylı kullanımına dökümantasyonundan göz atabilirsiniz. Bazı eksiklikleri var yeni olmasından dolayı ama bu haliyle bile birçok şeye çözüm olabiliyor.