data components herunterladen - data components Quellcode herunterladen

data components

Komponenten von Drittanbietern

Bypass already mounted components

Herunterladen

Datenkomponenten

Tiny Komponentenstruktur für Webanwendungen

Sponsoren

Vielen Dank an alle Sponsoren für dieses Projekt:

_{Lucas Motta}

→ Sponsern Sie meine Open -Source -Arbeit

Installieren

$ npm install data-components --save

^{Oder Sie können einfach die minifizierte eigenständige Version kopieren und einfügen, die unter dist/}

Merkmale

Es ist kein Modulbundler erforderlich, es funktioniert in allen Browsern
Null Abhängigkeiten
Keine Magie unter der Motorhaube, sehen Sie es selbst an
Klein (1,2 KB Minified)

Motivation

Es gibt viele Optionen, um eine Webanwendung zu architektieren, aber die meisten von ihnen gehen oft davon aus, dass Sie an einem Spa arbeiten. Das allein wird eine Menge Dinge hinzufügen, die Sie vielleicht überhaupt nicht wollen. Datenbindung, benutzerdefiniertes Messaging -System und virtuelles DOM, um nur einige zu nennen.

Manchmal braucht man einfach etwas Einfaches, um die Dinge zu starten, ohne sich Sorgen um die Benennung von Konventionen und das Programmieren von Paradigmen machen zu müssen. So wurde diese Bibliothek geboren.

Verwendung

Lassen Sie uns die einfachste TODO -List -App implementieren.

 <!-- 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, jetzt, da wir unser Markup haben, lassen Sie uns die Anwendung implementieren.

 // 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
} ) ;