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