Alpine.js

Alpine.js gir deg den reaktive og deklarative kvaliteten til store rammeverk som Vue og React, men til en mye lavere kostnad.

Du beholder din DOM og kan drysse over adferd slik du selv finner passende.

Tenk på det som Tailwind for JavaScript.

Merk: Dette verktøyets syntaks er omtrent i sin helhet lånt fra Vue (og i forlengelsen Angular). Jeg er for evig og alltid takknemlig for den gaven disse er til webben.

Oversatt dokumentasjon

Språk	Lenke til dokumentasjon
Arabisk	التوثيق باللغة العربية
Kinesisk, forenklet	简体中文文档
Kinesisk, tradisjonell	繁體中文說明文件
Tysk	Dokumentation in Deutsch
Indonesisk	Dokumentasi Bahasa Indonesia
Japansk	日本語ドキュメント
Portugisisk	Documentação em Português
Russisk	Документация на русском
Spansk	Documentación en Español
Tyrkisk	Türkçe Dokümantasyon
Fransk	Documentation en Français
Koreansk	한국어 문서

Installasjon

Fra CDN: Legg til følgende skript på slutten av ditt <head>-område.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

Det er alt du trenger å gjøre. Resten initialiserer seg automatisk.

For produksjonsmiljø anbefales det å benytte et spesifikt versjonsnummer i lenken for å unngå uventede feil som følge av nyere versjoner. For eksempel, for å bruke versjon 2.8.2 (nyeste):

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>

Fra npm: Installer pakken fra npm.

npm i alpinejs

Inkluder den i skriptet ditt.

import 'alpinejs'

For kompabilitet med IE11 Bruk de følgende skriptene i stedet.

<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>

Mønsteret vist her over er det såkalte module/nomodule pattern, som vil resultere at den moderne bunten lastes i moderne nettlesere, og at bunten til IE11 lastes automatisk i IE11 og andre eldre nettlesere.

Bruk

Rullegardinmeny/Modal

<div x-data="{ open: false }">
    <button @click="open = true">Åpne rullegardinmeny</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
        Innhold i rullegardinmenyen
    </ul>
</div>

Faner

<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Bar</button>

    <div x-show="tab === 'foo'">Fane Foo</div>
    <div x-show="tab === 'bar'">Fane Bar</div>
</div>

Du kan til og med benytte dette for ikke-trivielle ting: Forhåndshenting av HTML for en rullegardinmeny ved sveving.

<div x-data="{ open: false }">
    <button
        @mouseenter.once="
            fetch('/dropdown-partial.html')
                .then(response => response.text())
                .then(html => { $refs.dropdown.innerHTML = html })
        "
        @click="open = true"
    >Vis rullegardinmeny</button>

    <div x-ref="dropdown" x-show="open" @click.away="open = false">
        Lastespinner...
    </div>
</div>

Lære

Det finnes 14 direktiver du kan benytte:

Direktiv	Beskrivelse
`x-data`	Deklarerer et nytt komponentvirkefelt.
`x-init`	Utfører et uttrykk når komponenten er initialisert.
`x-show`	Slår av eller på `display: none;` på elementet avhengig av uttrykket (sant eller usant).
`x-bind`	Setter verdien av en egenskap til resultatet av et JS-uttrykk.
`x-on`	Kobler en hendelseslytter på elementet. Utfører et JS-uttrykk når den avgis.
`x-model`	Legger til "toveis databinding" til et element. Holder inndataelementet synkronisert med komponentdataene.
`x-text`	Fungerer tilsvarende som `x-bind`, men oppdaterer elementets `innerText`.
`x-html`	Fungerer tilsvarende som `x-bind`, men oppdaterer elementets `innerHTML`.
`x-ref`	En praktisk måte å hente ut rå DOM-elementer fra komponenten din .
`x-if`	Fjerner et element fullstendig fra DOM. Må brukes på en `<template>`-tagg.
`x-for`	Lager nye DOM-noder for hvert element i en matrise. Må brukes på en `<template>`-tagg.
`x-transition`	Direktiver for å legge til klasser på forskjellige stadier i et elements overgang.
`x-spread`	Lar deg binde et objekt med Alpine-direktiver til et element for bedre gjenbrukbarhet.
`x-cloak`	Denne egenskapen fjernes i det Alpine initialiseres. Nyttig for å skjule forhåndsinitialisert DOM.

Og 6 magiske egenskaper:

Magisk egenskap	Beskrivelse
`$el`	Henter rot-komponentens DOM-node.
`$refs`	Henter DOM-elementer som er markert med `x-ref` inne i komponenten.
`$event`	Henter det lokale nettleserobjektet "Event" inne i en hendelseslytter.
`$dispatch`	Lager en `CustomEvent` og sender den internt ved hjelp av `.dispatchEvent()`.
`$nextTick`	Utfører et gitt utrykk ETTER AT Alpine har utført sine reaktive oppdateringer i DOM.
`$watch`	Gjennomfører det oppgitte tilbakekallet i det øyeblikket en komponentegenskap du har observert ("watched"), har blitt endret.

Sponsorer

Vil du se din logo her? DM på Twitter

Fellesskapsprosjekter

Alpine Devtools
Alpine Magic Helpers
Alpine Weekly Newsletter
Spruce (State Management)
Awesome Alpine
Turbolinks Adapter

Direktiver

`x-data`

Eksempel: <div x-data="{ foo: 'bar' }">...</div>

Struktur: <div x-data="[object literal]">...</div>

x-data deklarerer et nytt komponentvirkefelt. Den forteller rammeverket at det skal initialisere en ny komponent med det følgende dataobjektet.

Tenk på det som data egenskapen i en Vue-komponent.

Trekke ut logikk fra komponenten

Du trekke ut data (og adferd) til gjenbrukbare funksjoner:

<div x-data="dropdown()">
    <button x-on:click="open">Open</button>

    <div x-show="isOpen()" x-on:click.away="close">
        // Rullegardinmeny
    </div>
</div>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }
</script>

For buntbrukere, noter deg at Alpine.js benytter funksjoner som er i det globale virkefeltet (window). Du må derfor eksplisitt tildele dine funksjoner til window for å kunne bruke dem med x-data. For eksempel window.dropdown = function () {} (dette er fordi du med Webpack, Rollup, Parcel etc. sine function som du definerer som standard vil benytte komponentens virkeområde og ikke window).

Du kan også mikse inn flere dataobjekter ved å benytte objektdestrukturering:

<div x-data="{...dropdown(), ...tabs()}">

`x-init`

Eksempel: <div x-data="{ foo: 'bar' }" x-init="foo = 'baz'"></div>

Struktur: <div x-data="..." x-init="[uttrykk]"></div>

x-init utfører et uttrykk når en komponent er initialisert.

Dersom du ønsker å kjøre kode ETTER AT Alpine har utført sine initielle oppdateringer til DOM (slik som en mounted()-krok i VueJS), kan du returnere et tilbakekall fra x-init, og det vil bli utført etter:

x-init="() => { // her har vi tilgang tilstanden etter initialisering av DOM // }"

`x-show`

Eksempel: <div x-show="open"></div>

Struktur: <div x-show="[uttrykk]"></div>

x-show slår av eller på display: none;-stilen på elementet avhengig av om uttrykket løses som true eller false.

x-show.transition

x-show.transition er et bekvemmelighets-API for å gjøre dine x-show mer behagelig ved å bruke CSS-overganger.

<div x-show.transition="open">
    Dette innholdet vil få en overgang inn og ut.
</div>

Direktiv	Beskrivelse
`x-show.transition`	En samtidig fadings- og skaleringseffekt. (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms)
`x-show.transition.in`	Kun overgang inn.
`x-show.transition.out`	Kun overgang ut.
`x-show.transition.opacity`	Kun fading.
`x-show.transition.scale`	Kun skalering.
`x-show.transition.scale.75`	Tilpass CSS-skaleringen for overgangen `transform: scale(.75)`.
`x-show.transition.duration.200ms`	Setter "in"-overgangen til 200ms. Ut vil bli satt til halvparten av det (100ms).
`x-show.transition.origin.top.right`	Tilpass utgangspunktet for CSS-overgangen `transform-origin: top right`.
`x-show.transition.in.duration.200ms.out.duration.50ms`	Forskjellig varighet for "in" og "out".

Merk: Alle disse overgangene kan brukes i sammenheng med hverandre. Dette er mulig (selv om det er tullete lol): x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95

Merk: x-show venter på at eventuelle barn fullfører sine overganger ut. Hvis du ønsker overstyre denne adferden, legg til modifikatoren .immediate:

<div x-show.immediate="open">
    <div x-show.transition="open">
</div>

`x-bind`

Merk: Du står fritt til å bruke den kortere syntaksen ":" :type="...".

Eksempel: <input x-bind:type="inputType">

Struktur: <input x-bind:[attribute]="[uttrykk]">

x-bind setter verdien for en egenskap til resultatet av et JavaScript-uttrykk. Uttrykket har tilgang til alle nøklene i komponentens dataobjekt, og vil oppdateres hver gang dens data blir oppdatert.

Merk: egenskapsbindinger oppdateres KUN når deres avhengigheter oppdateres. Rammeverket er smart nok til å observere dataendringer og oppdage hvilke bindinger som er interessert i dem.

x-bind for klasseegenskaper

x-bind oppfører seg litt anderledes når det bindes til class egenskapen.

For klasser må du sende inn et objekt hvor nøklene er klassenavn og hvor verdiene er boolske uttrykk for å avgjøre om disse klassenavnene skal anvendes eller ikke.

For eksempel: <div x-bind:class="{ 'hidden': foo }"></div>

I dette eksempelet vil klassen "hidden" kun anvendes dersom verdien av dataegenskapen foo er true.

x-bind for boolske egenskaper

x-bind støtter boolske egenskaper på samme måte som verdiegenskaper ved å bruke en variabel som betingelse eller et annet JavaScript-uttrykk som løses til enten true eller false.

For eksempel:

<!-- Gitt at: -->
<button x-bind:disabled="myVar">Klikk meg</button>

<!-- Når myVar == true (sann):  -->
<button disabled="disabled">Klikk meg</button>

<!-- Når myVar == false (usann): -->
<button>Klikk meg</button>

Dette legger til eller fjerner egenskapen disabled når myVar henholdsvis er sann eller usann.

Boolske egenskaper støttes slik de fremkommer i HTML-spesifikasjonen, for eksempel disabled, readonly, required, checked, hidden, selected, open, etc.

Merk: Hvis du trenger at en usann tilstand vises for egenskapen din, slik som aria-*, kjed .toString() til verdien når du binder til egenskapen. For eksempel: :aria-expanded="isOpen.toString()" vil vedvare uansett om isOpen er true eller false.

.camel modifikator

Eksempel: <svg x-bind:view-box.camel="viewBox">

Modifikatoren camel binder til et egenskapsnavn med tilsvarende pukkelOrd. I eksempelet over vil verdien av viewBox bli bundet til egenskapen viewBox i stedet for egenskapen view-box.

`x-on`

Merk: Du står fritt til bruke den kortere syntaksen "@" : @click="...".

Eksempel: <button x-on:click="foo = 'bar'"></button>

Struktur: <button x-on:[event]="[uttrykk]"></button>

x-on kobler en hendelseslytter til elementet det deklareres på. I det hendelsen avgis vil JavaScript-uttrykket som er satt som dens verdi bli utført. Du kan bruke x-on med hvilken som helst hendelse som er tilgjengelig for det elementet du deklarerer direktivet på. For en fullstendig oversikt over hendelser, se the Event reference on MDN.

Hvis noen data er modifisert i uttrykket, så vil andre elementegenskaper som er "bundet" til disse dataene bli oppdatert.

Merk: Du kan også spesifisere navnet på en JavaScript-funksjon. Eksempel: <button x-on:click="myFunction"></button>

Dette er tilsvarende til: <button x-on:click="myFunction($event)"></button>

keydown modifikatorer Eksempel: <input type="text" x-on:keydown.escape="open = false">

Du kan spesifisere spesifikke taster å lytte etter ved å bruke keydownmodifikatorer lagt til på direktivet x-on:keydown. Merk at modifikatorene er kebabnotasjonen av Event.key-verdier.

Eksempler: enter, escape, arrow-up, arrow-down

Merk: Du kan også lytte etter systemmodfiserende tastekombinasjoner som: x-on:keydown.cmd.enter="foo"

.away modifikator Eksempel: <div x-on:click.away="showModal = false"></div>

Når modifikatoren .away er tilstede, så vil hendelsesbehandlere kun utføres når hendelsen kommer fra en annen kilde enn seg selv, eller dens barn.

Dette er nyttig for å skjule rullegardinmenyer eller modaler i det en bruker klikker seg bort fra dem.

.prevent modifikator Eksempel: <input type="checkbox" x-on:click.prevent>

Legger du til .prevent til en hendelseslytter, så vil preventDefault bli kalt på den utløste hendelsen. I eksempelet over vil dette bety at avkrysningsruten faktisk ikke blir avkrysset når brukeren klikker på den.

.stop modifikator Eksempel: <div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>

Legger du til .stop til en hendelseslytter, så vil stopPropagationbli kalt på den utløste hendelsen. I eksempelet over vil dette bety at hendelsen "click" ikke vil boble fra knappen til det ytre <div>. Med andre ord, når en bruker klikker på knappen så vil ikke foo bli satt til 'bar'.

.self modifikator Eksempel: <div x-on:click.self="foo = 'bar'"><button></button></div>

Legger du til .self til en hendelseslytter, så vil hendelsesbehandleren kun bli trigget hvis $event.target er det samme elementet. I eksempelet over vil dette bety at hendelsen "click", som bobler fra knappen til det ytre <div> ikke utfører hendelsesbehandleren.

.window modifikator Eksempel: <div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>

Legger du til .window til en hendelseslytter, så vil lytteren festes på det globale vindusobjektet i stedet for på den DOM-noden som den ble deklarert på. Dette er nyttig i tilfeller hvor du ønsker å modifisere komponentens tilstand når noe endres i vinduet, eksempelvis hendelsen for endring av vinduets størrelse. I dette eksempelet betyr det at hvis viduet økes til en bredde større enn 768 piksler, så stenger vi modalen/rullegardinmenyen, eller i motsatt fall opprettholder vi samme tilstand.

Merk: Du kan også bruke modifikatoren .document for å legge til lyttere til document i stedet for window

.once modifikator Eksempel: <button x-on:mouseenter.once="fetchSomething()"></button>

Legger du til modifikatoren .once til en hendelseslytter, så sikrer det at lytteren kun blir behandlet én gang. Dette er nytt for ting du ønsker gjort én gang, som å hente HTML-partieller og lignende.

.passive modifikator Eksempel: <button x-on:mousedown.passive="interactive = true"></button>

Legger du til modifikatoren .passivetil en hendelseslytter, blir den passiv, hvilket betyr at preventDefault() ikke vil fungere for hendelser som blir behandlet. Dette kan for eksempel bidra til bedre ytelse ved rulling på berøringsenheter.

.debounce modifikator Eksempel: <input x-on:input.debounce="fetchSomething()">

Modifikatoren debounce lar deg midlertidig "avvise" en hendelseslytter. Med andre ord, hendelseslytteren vil IKKE behandles inntil en bestemt mengde tid har forløpt siden hendelsen sist ble fyrt av. Når behandleren er klar til å bli kallet, så vil den siste behandleren blir utført.

Standard "ventetid" er 250 millisekunder.

Hvis du ønsker å tilpasse dette, så kan du spesifisere en tilpasset ventetid på denne måten:

<input x-on:input.debounce.750="fetchSomething()">
<input x-on:input.debounce.750ms="fetchSomething()">

.camel modifikator Eksempel: <input x-on:event-name.camel="doSomething()">

Modifikatoren camel fester en hendelseslytter med et camelCase-navn som samsvarer med navnet på hendelsen. I eksempelet over, så vil uttrykket over bli evaluert når hendelsen ´eventName´ fyres av på elementet.

`x-model`

Eksempel: <input type="text" x-model="foo">

Struktur: <input type="text" x-model="[data item]">

x-model legger til "toveis databinding" til et element. Med andre ord, verdien til et inndataelement vil bli holdt synkronisert ved verdien til dataelementet i komponenten.

Merk: x-model er smart nok til å oppdage endringer i tekstinndataelement, avkrysningsbokser, radioknapper, tekstområde, selects, and multiple selects. I slike scenario oppfører den seg slik Vue ville gjort.

.number modifikator Eksempel: <input x-model.number="age">

Modifikatoren number konverterer en inndataverdi til et nummer. Hvis verdien ikke kan parses som et gyldig nummer, returneres den originale verdien.

.debounce modifikator Eksempel: <input x-model.debounce="search">

Modifikatoren debounce lar deg legge til en "avviser" til oppdateringen av en verdi. Med andre ord, hendelsesbehandleren vil IKKE behandles inntil en bestemt mengde tid siden hendelsen sist ble fyrt av. Når behandleren er klar til å bli kallet, så vil den siste behandleren bli utført.

Standard "ventetid" er 250 millisekunder.

Hvis du ønsker å tilpasse dette, så kan du spesifisere en tilpasset ventetid på denne måten:

<input x-model.debounce.750="search">
<input x-model.debounce.750ms="search">

`x-text`

Eksempel: <span x-text="foo"></span>

Struktur: <span x-text="[uttrykk]"

x-text fungerer tilsvarende som x-bind, men i stedet for å oppdatere verdien til en egenskap, så oppdaterer den elementets innerText.

`x-html`

Eksempel: <span x-html="foo"></span>

Struktur: <span x-html="[uttrykk]"

x-html fungerer tilsvarende som x-bind, men i stedet for å oppdatere verdien til en egenskap, så oppdaterer den elementets innerHTML.

⚠️ Bruk kun innhold du kan stole på, og aldri innhold som kommer fra brukere. ⚠️

HTML som blir gjengitt dynamisk fra tredjepart kan lett føre til XSS-sårbarheter.

`x-ref`

Eksempel: <div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>

Struktur: <div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>

Med x-ref får du en praktisk måte å hente ut rå DOM-elementer fra dine komponenter. Setter du en x-ref-egenskap på et element, så gjør du det tilgjengelig for alle hendelsesbehandlere inne i et objekt kalt $refs.

Dette er et nyttig alternativ til å sette id-er og så bruke document.querySelector over alt.

Merk: du kan også binde dynamiske verdier til x-ref: <span :x-ref="item.id"></span>.

`x-if`

Eksempel: <template x-if="true"><div>Et element</div></template>

Struktur: <template x-if="[expression]"><div>Et element</div></template>

For de tilfeller hvor x-show ikke er tilstrekkelig (x-show setter et element til display: none dersom den er usann), så kan x-if brukes til å fullstendig fjerne et element fra DOM.

Det er viktig at x-if brukes på en <template></template>-tagg, fordi Alpine ikke bruker en virtuell DOM. Denne implementasjonen holder Alpine robust og gjør at den kan bruke den ekte DOM for sin magi.

Merk: x-if må ha ett enkelt rotelement inne i <template></template>-taggen.

Merk: Ved bruk av template i en svg-tagg, må du legge til en polyfyll, som må kjøres før Alpine.js er initialisert.

`x-for`

Eksempel:

<template x-for="item in items" :key="item">
    <div x-text="item"></div>
</template>

Merk: bindingen :key er valgfri, men HØYST anbefalt.

x-for er tilgjengelig for tilfeller der du vil opprette nye DOM-noder for hvert element i en matrise. Dette skal se ut som v-for i Vue, med det unntak at den må eksistere på en template-tagg, og ikke et vanlig DOM-element.

Hvis du vil ha tilgang til gjeldende indeks for iterasjonen, bruker du følgende syntaks:

<template x-for="(item, index) in items" :key="index">
    <!-- Du kan også referere til "index" inne i iterasjonen om du behøver det. -->
    <div x-text="index"></div>
</template>

Hvis du vil ha tilgang til arrayobjektet ("collection") av iterasjonen, bruker du følgende syntaks:

<template x-for="(item, index, collection) in items" :key="index">
    <div>
        <!-- Du kan også referere til "collection" inne i iterasjonen om du behøver det. -->
        <!-- Current item. -->
        <div x-text="item"></div>
        <!-- Samme som over. -->
        <div x-text="collection[index]"></div>
        <!-- Forrige enhet. -->
        <div x-text="collection[index - 1]"></div>
    </div>
</template>

Merk: x-for må ha ett enkelt rotelement inne i <template></template>-taggen.

Merk: Ved bruk av template i en svg-tagg, må du legge til en polyfyll, som må kjøres før Alpine.js er initialisert.

Nøsting av `x-for`

Du kan nøste x-for-løkker, med du MÅ pakke inn hver løkke i et element. For eksempel:

<template x-for="item in items">
    <div>
        <template x-for="subItem in item.subItems">
            <div x-text="subItem"></div>
        </template>
    </div>
</template>

Iterere over et område

Alpine støtter syntaksen i in n, hvor n er et heltall, slik at du kan iterere over et fastsatt område med elementer.

<template x-for="i in 10">
    <span x-text="i"></span>
</template>

`x-transition`

Eksempel:

<div
    x-show="open"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform scale-90"
    x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-90"
>...</div>

<template x-if="open">
    <div
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-90"
    >...</div>
</template>

Eksempelet over bruker klasser fra Tailwind CSS.

Alpine tilbyr 6 forskjellige overgangsdirektiver for å anvende klasser på forskjellige stadier av et elementets overgang mellom "skjulte" og "viste" stater. Disse direktivene fungerer både med x-show og x-if.

Disse oppfører seg akkurat slik som VueJS' overgangsdirektiver, bortsett fra at de har forskjellige, mer fornuftige navn:

Direktiv	Beskrivelse
`:enter`	Brukes i løpet av hele inngangsfasen.
`:enter-start`	Legges til før elementet settes inn, fjernes én ramme etter at elementet er satt inn.
`:enter-end`	Legges til én ramme etter at elementet er satt inn (samtidig fjernes `enter-start`). Fjernes når overgangen / animasjonen er ferdig.
`:leave`	Brukes i løpet av hele utgangsfasen.
`:leave-start`	Legges til umiddelbart når en utgående overgang utløses, fjernes etter én ramme.
`:leave-end`	Legges til én ramme etter at en utgangsovergang er utløst (samtidig fjernes `leave-start`). Fjernes når overgangen / animasjonen er ferdig.

`x-spread`

Eksempel:

<div x-data="dropdown()">
    <button x-spread="trigger">Åpne rullegardinmeny</button>

    <span x-spread="dialogue">Innhold i rullegardinmenyen</span>
</div>

<script>
    function dropdown() {
        return {
            open: false,
            trigger: {
                ['@click']() {
                    this.open = true
                },
            },
            dialogue: {
                ['x-show']() {
                    return this.open
                },
                ['@click.away']() {
                    this.open = false
                },
            }
        }
    }
</script>

x-spread lar deg trekke ut elementets Alpine-bindinger til et gjenbrukbart objekt.

Objektnøklene er direktivene (kan være et hvilket som helst direktiv inkludert modifikatorer), og verdiene er tilbakekallinger som skal evalueres av Alpine.

Merk: Det er et par forbehold å legge merke til ved bruk av x-spread:

Dersom direktivet som blir "spredt" er x-for, bør du returnere en vanlig uttrykksstreng fra tilbakekallet. For eksempel: ['x-for']() { return 'item in items' }.

x-data og x-init kan ikke benyttes inne i et "spread"-object.

`x-cloak`

Eksempel: <div x-data="{}" x-cloak></div>

x-cloak-egenskaper fjernes fra elementene når Alpine initialiseres. Dette er nyttig for å skjule forhåndsinitialisert DOM. For at dette skal fungere legger man typisk til følgende globale stil:

<style>
    [x-cloak] {
        display: none !important;
    }
</style>

Magiske egenskaper

Med unntak av $el, så er magiske egenskaper ikke tilgjengelig inne i x-data da komponenten der ennå ikke er initialisert.

`$el`

Eksempel:

<div x-data>
    <button @click="$el.innerHTML = 'foo'">Erstatt meg med "foo"</button>
</div>

$el er en magisk egenskap som kan benyttes til å hente ut rotkomponentens DOM-node.

`$refs`

Eksempel:

<span x-ref="foo"></span>

<button x-on:click="$refs.foo.innerText = 'bar'"></button>

$refs er en magisk egenskap som kan benyttes til å hente ut DOM-elementer markert med x-ref inne i komponenten. Dette er nyttig når du har behov for å endre DOM-elementer manuelt.

`$event`

Eksempel:

<input x-on:input="alert($event.target.value)">

$event er en magisk egenskap som kan benyttes inne i en hendelseslytter for å hente ut nettleserens lokale "Event"-objekt.

Merk: Egenskapen $event er kun tilgjengelig i DOM-uttrykk.

Hvis du trenger tilgang til $event inne i en JavaScript-funksjon, så kan du sende den inn direkte:

<button x-on:click="myFunction($event)"></button>

`$dispatch`

Eksempel:

<div @custom-event="console.log($event.detail.foo)">
    <button @click="$dispatch('custom-event', { foo: 'bar' })">
    <!-- Når knappen klikkes, så skrives "bar" til console.log -->
</div>

Merknad om hendelsesforplantning

Vær oppmerksom på at som følge av hendelsesbobling må du bruke modifikatoren .window når du skal fange hendelser under samme nøstede hierarki:

Eksempel:

<div x-data>
    <span @custom-event="console.log($event.detail.foo)"></span>
    <button @click="$dispatch('custom-event', { foo: 'bar' })">
<div>

Dette vil ikke fungere fordi når custom-event sendes, så vil den forplante seg til dens felles forfar, som her er div.

Avsending til komponenter

Du kan også dra nytte av den forrige teknikken for å få komponentene til å snakke med hverandre:

Eksempel:

<div x-data @custom-event.window="console.log($event.detail)"></div>

<button x-data @click="$dispatch('custom-event', 'Hello World!')">
<!-- Når knappen klikkes, så skrives "Hello World!" til console.log. -->

$dispatch er en forkortelse for å lage en CustomEvent og sende den internt ved hjelp av .dispatchEvent(). Det er mange gode bruksområder for å formidle data rundt og mellom komponenter ved hjelp av tilpassede hendelser. Les her for mer informasjon om det underliggende CustomEvent-systemet i nettlesere.

Du vil legge merke til at data som sendes som den andre parameteren til $dispatch('some-event', { some: 'data' }), blir tilgjengelig gjennom den nye hendelsen "detail"-egenskapen: $event.detail.some. Å legge til egendefinerte hendelsesdata til egenskapen .detail er standard praksis for CustomEvent i nettlesere. Les her for mer informasjon.

Du kan også bruke $dispatch() for å trigge dataoppdateringer x-model-bindinger. For eksempel:

<div x-data="{ foo: 'bar' }">
    <span x-model="foo">
        <button @click="$dispatch('input', 'baz')">
            <!-- Etter at knappen her blir klikket, så vil `x-model` fange den boblende "input"-hendelsen og oppdatere foo til "baz". -->
    </span>
</div>

Merk: Egenskapen $dispatch er kun tilgjengelig i DOM-uttrykk.

Hvis du trenger tilgang til $dispatch inne i en JavaScript-funksjon, så kan du sende den inn direkte:

<button x-on:click="myFunction($dispatch)"></button>

`$nextTick`

Eksempel:

<div x-data="{ fruit: 'apple' }">
    <button
        x-on:click="
            fruit = 'pear';
            $nextTick(() => { console.log($event.target.innerText) });
        "
        x-text="fruit"
    ></button>
</div>

$nextTick er en magisk egenskap som lar deg bare utføre et gitt uttrykk etter at Alpine har gjort sine reaktive DOM-oppdateringer. Dette er nyttig når du vil samhandle med DOM-tilstanden ETTER at den gjenspeiler dataoppdateringer du har gjort.

`$watch`

Eksempel:

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Toggle Open</button>
</div>

Du kan observere ("watch") en komponentegenskap med den magiske metoden $watch. I eksempelet over betyr det at når du klikker på knappen og open endres, så vil det oppgitte tilbakekallet bli avfyrt og den nye verdien skrives til console.log.

Sikkerhet

Hvis du finner et sikkerhetsavvik, vennligst send en e-post til calebporzio@gmail.com.

Alpine benytter seg av en tilpasset implementasjon i form av Function-objektet for å evaluere sine direktiver. Til tross for at den er mer sikker enn eval(), så er den ikke tillatt i alle miljøer, slik som Google Chrome App, når den bruker restriktiv Content Security Policy (CSP).

Hvis du benytter Alpine på et nettsted hvor sensitive data håndeteres og hvor CSP er påkrevd, må du inkludere unsafe-eval i din policy. En robust policy, riktig konfigurert, vil bidra til å beskytte brukerne dine når du håndterer personlige eller økonomiske data.

Siden en policy gjelder alle skript på siden din, er det viktig at andre eksterne biblioteker som er inkludert på nettstedet, blir nøye gjennomgått for å sikre at de er pålitelige og at de ikke vil innføre noen Cross Site Scripting-sårbarheter enten ved å bruke eval()-funksjonen eller ved å manipulere DOM for å injisere skadelig kode på siden din.

Veikart til V3

Endre fra x-ref til ref for Vue-paritet?
Legge til Alpine.directive()
Legge til Alpine.component('foo', {...}) (Med magisk __init()-metode)
Sende Alpine-hendelser for "loaded", "transition-start", etc... (#299) ?
Fjerne "object" (og matrise) syntaks fra x-bind:class="{ 'foo': true }" (#236 for å legge til støtte for objektsyntaks for style-egenskapen)
Forbedre x-for mutasjonsreaktivitet (#165)
Legge til "deep watching" støtte i V3 (#294)
Legge til $el snarvei
Endre @click.away til @click.outside?

Lisens

Lisensiert under MIT-lisensen, se LICENSE.md for detaljer.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.no.md

README.no.md

Alpine.js

Oversatt dokumentasjon

Installasjon

Bruk

Lære

Sponsorer

Fellesskapsprosjekter

Direktiver

`x-data`

`x-init`

`x-show`

`x-bind`

`x-on`

`x-model`

`x-text`

`x-html`

`x-ref`

`x-if`

`x-for`

Nøsting av `x-for`

Iterere over et område

`x-transition`

`x-spread`

`x-cloak`

Magiske egenskaper

`$el`

`$refs`

`$event`

`$dispatch`

`$nextTick`

`$watch`

Sikkerhet

Veikart til V3

Lisens

Files

README.no.md

Latest commit

History

README.no.md

File metadata and controls

Alpine.js

Oversatt dokumentasjon

Installasjon

Bruk

Lære

Sponsorer

Fellesskapsprosjekter

Direktiver

x-data

x-init

x-show

x-bind

x-on

x-model

x-text

x-html

x-ref

x-if

x-for

Nøsting av x-for

Iterere over et område

x-transition

x-spread

x-cloak

Magiske egenskaper

$el

$refs

$event

$dispatch

$nextTick

$watch

Sikkerhet

Veikart til V3

Lisens

`x-data`

`x-init`

`x-show`

`x-bind`

`x-on`

`x-model`

`x-text`

`x-html`

`x-ref`

`x-if`

`x-for`

Nøsting av `x-for`

`x-transition`

`x-spread`

`x-cloak`

`$el`

`$refs`

`$event`

`$dispatch`

`$nextTick`

`$watch`