data componentsダウンロード - data componentsソースコードのダウンロード

data components

サードパーティ製コンポーネント

Bypass already mounted components

ダウンロード

データコンポーネント

Webアプリケーション用の小さなコンポーネント構造

スポンサー

このプロジェクトのすべてのスポンサーに感謝します：

_{ルーカス・モッタ}

→私のオープンソース作業のスポンサー

インストール

$ npm install data-components --save

^{または、 dist/の下に住んでいるマイニフィスされたスタンドアロンバージョンをコピーして貼り付けることができます}

特徴

モジュールバンドラーは必要ありません、それはすべてのブラウザで動作します
ゼロ依存関係
ボンネットの下に魔法はありません、あなた自身のためにそれを見てください
小さい（1.2 kbの縮小）

モチベーション

そこにWebアプリケーションをアーキテクチャ化するためのオプションがたくさんありますが、それらのほとんどはあなたがスパで作業していると仮定しています。それだけでは、あなたがまったく欲しくないかもしれないものをたくさん追加します。データのバインディング、カスタムメッセージングシステム、仮想DOMをいくつか挙げてください。

慣習の名前やプログラミングのパラダイムを心配することなく、物事を始める簡単なものが必要な場合もあります。それがこの図書館が生まれた方法です。

使用法

最もシンプルなTODOリストアプリを実装しましょう。

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