Download data components - Download de código -fonte data components

data components

Componentes de terceiros

Bypass already mounted components

Baixar

componentes de dados

Estrutura de componentes minúsculos para aplicativos da Web

Patrocinadores

Obrigado a todos os patrocinadores por este projeto:

_{Lucas Motta}

→ patrocinar meu trabalho de código aberto

Instalar

$ npm install data-components --save

^{Ou você pode simplesmente copiar e colar a versão autônomo minificada que vive em dist/}

Características

Não há necessidade de um módulo Module, ele funciona em todos os navegadores
Zero dependências
Sem mágica sob o capô, veja por si mesmo
Pequeno (1,2 kb minificado)

Motivação

Existem muitas opções para arquitetar um aplicativo da Web por aí, mas a maioria deles geralmente assume que você está trabalhando em um spa. Isso por si só adicionará muitas coisas que você talvez não queira. Ligação de dados, sistema de mensagens personalizado e DOM virtual, para citar alguns.

Às vezes, você só precisa de algo simples para iniciar as coisas sem ter que se preocupar em nomear convenções e programar paradigmas. Foi assim que essa biblioteca nasceu.

Uso

Vamos implementar o aplicativo de lista de TODO mais 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, agora que temos nossa marcação no lugar, vamos implementar o aplicativo.

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