Descarga data components - Descarga del código fuente data components

data components

Componentes de terceros

Bypass already mounted components

Descargar

componentes de datos

Estructura de componentes pequeños para aplicaciones web

Patrocinadores

Gracias a todos los patrocinadores de este proyecto:

_{Lucas Motta}

→ Patrocinar mi trabajo de código abierto

Instalar

$ npm install data-components --save

^{O simplemente puede copiar y pegar la versión independiente minificada que vive bajo dist/}

Características

No hay necesidad de un módulo Bundler, funciona en todos los navegadores
Cero dependencias
No hay magia debajo del capó, verlo por ti mismo
Pequeño (1.2 kb minificado)

Motivación

Hay muchas opciones para arquitectar una aplicación web, pero la mayoría de ellos a menudo asumen que está trabajando en un spa. Eso solo agregará muchas cosas que quizás no desee en absoluto. Enlace de datos, sistema de mensajería personalizada y DOM virtual, por nombrar algunos.

A veces solo necesitas algo simple para iniciar cosas sin tener que preocuparte por nombrar convenciones y paradigmas de programación. Así nació esta biblioteca.

Uso

Implementemos la aplicación de lista de tareas más simples.

 <!-- 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, ahora que tenemos nuestro marcado en su lugar, implementemos la aplicación.

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