data components下載 - data components源代碼下載

data components

三方組件

Bypass already mounted components

下載

數據組件

Web應用程序的微小組件結構

贊助商

感謝所有贊助商的這個項目：

_{盧卡斯·莫塔（Lucas Motta）}

→贊助我的開源工作

安裝

$ npm install data-components --save

^{或者，您可以簡單地複制並粘貼居住在dist/}

特徵

無需模塊捆綁器，它在所有瀏覽器中都起作用
零依賴性
沒有魔術，搖頭，親自看
小（1.2 kb縮小）

動機

有很多選擇可以構建Web應用程序，但是大多數人經常假設您正在使用水療中心。僅此一項就會添加很多您可能不想要的東西。數據綁定，自定義消息系統和虛擬DOM命名。

有時，您只需要簡單的事情即可開始，而不必擔心命名慣例和編程範例。這就是這個圖書館的出生方式。

用法

讓我們實現最簡單的待辦事項列表應用程序。

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

好的，既然我們已經準備好了，請實現應用程序。

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