Téléchargement data components - Téléchargement du code source data components

data components

Composants tiers

Bypass already mounted components

Télécharger

composants de données

Structure de composants minuscules pour les applications Web

Installer

$ npm install data-components --save

^{Ou vous pouvez simplement copier et coller la version autonome minifiée qui vit sous dist/}

Caractéristiques

Pas besoin d'un bundler de module, il fonctionne dans tous les navigateurs
Zéro dépendances
Pas de magie sous le capot, voyez-le par vous-même
Petit (1,2 kb minifié)

Motivation

Il existe de nombreuses options pour architer une application Web, mais la plupart d'entre elles supposent souvent que vous travaillez sur un spa. Cela seul ajoutera beaucoup de choses que vous ne voudrez peut-être pas du tout. Boundage des données, Système de messagerie personnalisé et DOM virtuel pour n'en nommer que quelques-uns.

Parfois, vous avez juste besoin de quelque chose de simple pour lancer les choses sans avoir à vous soucier de nommer les conventions et des paradigmes de programmation. C'est ainsi que cette bibliothèque est née.

Usage

Implémentons l'application de liste ToDo la plus simple.

 <!-- Create our todo list element passing some initial values -->
< ul data-component =" todo " data-values =" foo,bar " > </ ul >

<!-- Let's use a input field to read the user input -->
< input data-component =" input " placeholder =" What to do? " >

Ok, maintenant que nous avons notre balisage en place, mettons en œuvre l'application.

 // Todo component
class Todo {
  constructor ( el , options ) {
    this . el = el ;
    // Read from initial values
    this . todos = options . values . split ( ',' ) ;
    this . render ( ) ;
  }

  // Add items to the list
  add ( todo ) {
    this . todos . push ( todo ) ;
    this . render ( ) ;
  }

  // Render the list to the DOM
  render ( ) {
    this . el . innerHTML = this . todos . map ( todo => `<li> ${ todo } </li>` ) . join ( '' ) ;
  }
}

// User input component
class Input {
  constructor ( el , options , sandbox ) {
    const todo = sandbox . get ( 'todo' ) ;

    // Submit value to "todo" component when hitting the enter key
    el . addEventListener ( 'keydown' , e => {
      if ( e . keyCode === 13 ) {
        todo . add ( el . value ) ;
        el . value = '' ;
        el . focus ( ) ;
      }
    } ) ;
  }
}

// Bootstrap components (UMD build exposes `components()`)
components ( {
  todo : Todo ,
  input : Input
} ) ;