Unduh data components - Unduh Kode Sumber data components

data components

Komponen pihak ketiga

Bypass already mounted components

Unduh

Komponen data

Struktur komponen kecil untuk aplikasi web

Sponsor

Terima kasih untuk semua sponsor untuk proyek ini:

_{Lucas Motta}

→ mensponsori pekerjaan open source saya

Memasang

$ npm install data-components --save

^{Atau Anda dapat menyalin dan menempelkan versi mandiri minified yang hidup di bawah dist/}

Fitur

Tidak perlu modul bundler, ia bekerja di semua browser
Nol dependensi
Tidak ada sihir di bawah kap, lihat sendiri
Kecil (1,2 kb Minified)

Motivasi

Ada banyak opsi untuk arsitek aplikasi web di luar sana tetapi kebanyakan dari mereka sering berasumsi bahwa Anda sedang mengerjakan spa. Itu saja akan menambah banyak hal yang mungkin tidak Anda inginkan sama sekali. Ikatan data, sistem pesan khusus dan DOM virtual untuk beberapa nama.

Terkadang Anda hanya membutuhkan sesuatu yang sederhana untuk memulai sesuatu tanpa harus khawatir tentang penamaan konvensi dan paradigma pemrograman. Begitulah perpustakaan ini lahir.

Penggunaan

Mari kita terapkan aplikasi daftar TODO paling sederhana.

 <!-- 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? " >

Oke, sekarang kita memiliki markup kita di tempat, mari kita terapkan aplikasi.

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