/dababy

:trollface: Data binding so simple even DaBaby could do it!

Primary LanguageTypeScriptMIT LicenseMIT

Dababy

Data binding so simple even DaBaby could do it!

Note: This name was just made off of a whim, not aimed at offending anyone. If you're looking for something a bit more comprehensive, but not to the level of Vue or Angular, check out Lucia

Installation

Put this script tag between the <head> tags of your webpage.

<script src="https://unpkg.com/dababy"></script>

Dababy Quote Generator Example

<div data="{ quotes: ['LES GO', 'LESS GO', 'LESSS GO'] }">
  <button ref="quote" bind="{
    onclick: () => {
      const quote = quotes[Math.floor(Math.random() * quotes.length)];
      refs.quote.innerHTML = quote;
    }
  }"><button>
</div>

Features

Data

Add the data attribute to an element to get started. The value of the attribute should be an object literal. Anything under that element will be able to access the data as global variables when binding.

Example:

<div data="{ name: 'Dababy' }">
  <!-- content here -->
</div>

Bind

Add the bind attribute to an element to bind properties, basically anything you can access in JavaScript like innerHTML, onclick, style, id, etc. This will attach it to the element

Example:

<div data="{ name: 'Dababy' }">
  <p bind="{ innerHTML: name }"><!-- Dababy --></p>
</div>

Refs

Add the ref attribute to create markers that act like shorthands for document.querySelector. Attach it to an element and name it in the attribute value, then access it later by doing refs.<name>

Example:

<div data="{ name: 'Dababy' }">
  <p ref="name">: turned into a convertable</p>
  <p bind="{ innerHTML: name + refs.name.innerHTML }"><!-- Dababy: turned into a convertable --></p>
</div>

© 2021 Aiden Bai