Alpine.js primer

by punund

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.28.0/ramda.min.js"></script>
<script src="//esm.run/simplex-noise"></script>
<div x-data="data()">
  <template x-for="attribute in Object.keys(people[0])" :key="attribute">
    <span x-text="attribute" @click="people.sort((a, b) => (a[attribute] > b[attribute]) ? 1 : -1)"></span>
  </template>
  <template x-for="person in people" :key="person">
    <div>
      <span x-text="person.name"></span> <span x-text="person.age"></span>
    </div>
  </template>
</div>

JavaScript

import {  createNoise2D } from 'https://esm.run/simplex-noise'

console.log(createNoise2D())

var data = function() {
  return {
    people: [{
        name: R.zipWith(R.add, [1, 2, 3], [10.1, 11.2, 12.3]),
        age: 42
      },
      {
        name: "Jane Doe",
        age: "40"
      }
    ]
  }
}