معرفی به alpine.js: یک چارچوب جاوا اسکریپت برای مینیمالیست ها

alpine و htmx

آلپین از ویژگی های HTML برای تعریف عملکرد آن استفاده می کند ، که آن را از بعضی جهات شبیه به htmx اگرچه آنها کارهای مختلفی انجام می دهند ، هر دو فناوری از برنامه های پسوند HTML با x-prefix استفاده می کنند تا قدرت های بوت استرپ را بر روی HTML قدیمی قدیمی انجام دهند.

<div x-data="{ message: 'When in the course of human events...' }"> <span x-text="message"></span> </div>

اکنون این صفحه آغاز اعلامیه استقلال را صادر می کند. می توانید ببینید که x-data یک شیء قدیمی JavaScript قدیمی را با یک قسمت واحد ، “پیام” تعریف کرده است که حاوی مقدمه است ، و اینکه x-text به این قسمت شیء اشاره دارد.

واکنش پذیری در آلپ

اکنون ما از واکنش پذیری برای رفع خطایی در سند استفاده خواهیم کرد:

<div x-data="{ noun: 'men' }">
  <button x-on:click="noun = 'people'">Fix It</button>
  <span x-text="`all ${noun} are created equal`"></span>
</div>

همانطور که اکنون مشهود است ، دستورالعمل X-Text به متغیر اسم در معرض دستورالعمل X اشاره دارد. قطعه جدید در اینجا دکمه ای است که دارای دستورالعمل X-on است: روی کلیک کنید. کنترل کننده این رویداد کلیک جایگزین اسم پیش فرض قدیمی (“مردان”) با یک جنسیت بی طرف ، “مردم” است. واکنش پذیری سپس به روزرسانی مرجع را در x-text انجام می دهد.

UI به طور خودکار تغییر داده ها را منعکس می کند.

توابع در داده ها

خصوصیات داده در آلپین اشیاء جاوا اسکریپت کامل است. با دانستن این موضوع ، در اینجا روش دیگری برای رسیدگی به نیاز فوق وجود دارد:

<div x-data="{ 
      noun: 'men', 
      fixIt: function(){
        this.noun = 'people';
      }
    }">
    <button x-on:click="fixIt()">Fix It</button>
    <span x-text="`all ${noun} are created equal`"></span>
  </div>

در این مثال ، می بینید که شی داده اکنون میزبان یک روش fixit است که توسط کنترل کننده کلیک خوانده می شود. ما می توانیم هر ساختار شیء را به بهترین وجه با رفتاری که می خواهیم در HTML مشاهده کنیم ، انجام دهیم.

اسکریپت در مقابل X-Data

گاهی اوقات کدی را مشاهده می کنید که از دستورالعمل X-Data به یک تابع تعریف شده در یک اسکریپت می پردازد. این یک موضوع اولویت شخصی است ، زیرا دقیقاً به همان روشی که یک خط داخلی x-data عمل می کند ، عمل می کند:

<div x-data="myDataFunction()">...</div>
	...
	<script>
	  function myDataFunction() {
	    return {
		  foo: "bar"
		}
	  }
	</script>

واکشی داده های از راه دور

اکنون اجازه دهید چرخ دنده ها را تغییر دهیم و در مورد الزامی که می خواهید یک لیست با فرمت JSON از روسای جمهور آمریکایی را از یک API خارجی بارگیری کنید ، فکر کنیم. اولین کاری که ما انجام خواهیم داد این است که هنگام بارگیری صفحه ، آن را بارگیری کنیم. برای این کار ، ما از دستورالعمل x-init استفاده خواهیم کرد:

<div x-data="{
      presidents: []
    }" 
    x-init="(
      async () => {
        const response = await fetch('https://raw.githubusercontent.com/hitch17/sample-data/master/presidents.json');
        presidents = await response.json();
      }
    )">
    <span x-text="presidents"></span>
  </div>

اجازه دهید این کد را باز کنیم. دستورالعمل X-Data باید واضح باشد. این یک قسمت روسای جمهور با یک آرایه خالی دارد. x-text در عنصر span محتویات این قسمت را خروجی می کند.

کد x-init کمی بیشتر درگیر است. اول از همه ، توجه کنید که در یک عملکرد خود اجرایی پیچیده شده است. این امر به این دلیل است که Alpine انتظار یک عملکرد را دارد (نه یک تعریف عملکرد). اگر قرار بود از فرم پاسخ به تماس غیر ASYNC Fetch استفاده کنید ، نیازی به بسته بندی عملکرد مانند این نیست (زیرا در این مورد به عملکرد async-scoped احتیاج ندارید).

پس از به دست آوردن لیست روسای جمهور از نقطه پایانی ، ما آن را به متغیر روسای جمهور می چسبانیم ، که آلپین به عنوان بخشی از شیء x-data در معرض ما قرار داده است.

برای تکرار: Alpine داده ها را از X-Data در دسترس سایر توابع دستورالعمل (مانند x-init ) در همان زمینه قرار می دهد.

تکرار با آلپین

در این مرحله ، برنامه داده ها را از نقطه پایانی از راه دور بیرون می کشد و آن را به حالت ذخیره می کند. با این حال ، این در حال خروج از چیزی مانند [object] ، [object] .... است. این چیزی نیست که ما می خواهیم. برای رفع آن ، ما ابتدا باید نگاهی به تکرار داده ها بیندازیم:

<div x-data=...>
<ul>
      <template x-for="pres in presidents">
        <li><div x-text="pres.president"></div>
          From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
      </template>
    </ul>
</div>

مرد ، که واقعاً تمیز ، کد و الگوی خود توضیحی است!

کد حاوی یک لیست غیر سفارش معمولی ، و سپس یک عنصر الگوی html است که حاوی x-for است. این دستورالعمل دقیقاً مانند سایر چارچوبهای واکنشی عمل می کند. این امکان را برای تعیین یک مجموعه ، روسای جمهور و یک شناسه فراهم می کند ، که به نشانه محصور شده ارائه می شود که نشان دهنده هر نمونه از آن مجموعه است (در این حالت ، pres ).

<template x-for="pres in presidents">
  <li>
    <div x-text="pres.president" x-on:click="pres.show = ! pres.show"></div>
    <div x-show="pres.show">
       From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span>
     </div>
  </li>
</template>

<div x-show="pres.show" x-transition>
  From: <span x-text="pres.took_office"></span> Until: <span x-text="pres.left_office"></span></li>
</div>

<div x-data="{
  filter: '',
  presidents: [],
    getPresidents: function(){
        return this.presidents.filter(pres => pres.president.includes(this.filter) )
      }
    }" 
...
    <input x-model="filter" />
...
  <ul>
      <template x-for="pres in getPresidents">