# bind-ui-elements

> a helper library to easy to create ui elements

Latest version **1.1.10** (published 2016-06-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install bind-ui-elements
pnpm add bind-ui-elements
yarn add bind-ui-elements
bun add bind-ui-elements
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.10 |
| Published | 2016-06-04 |
| First published | 2016-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hoa Nguyen Thai |
| Maintainers | hoa.nguyen-thai |
| Keywords | jquery, helper |

## Links

- npm: https://www.npmjs.com/package/bind-ui-elements
- Repository: https://github.com/hoanguyen311/bind-ui-elements
- Homepage: https://github.com/hoanguyen311/bind-ui-elements#readme
- Issues: https://github.com/hoanguyen311/bind-ui-elements/issues
- npm.io page: https://npm.io/package/bind-ui-elements

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.1.10 (latest) — 2016-06-04
- 1.1.9 — 2016-06-04
- 1.1.8 — 2016-06-04
- 1.1.7 — 2016-06-04
- 1.1.6 — 2016-06-04
- 1.1.5 — 2016-06-04
- 1.1.4 — 2016-06-04
- 1.1.3 — 2016-06-04
- 1.1.2 — 2016-06-04
- 1.1.1 — 2016-06-04
- 1.1.0 — 2016-06-04
- 1.0.5 — 2016-06-04
- 1.0.4 — 2016-06-04
- 1.0.3 — 2016-05-31
- 1.0.2 — 2016-05-31
- … 2 more at https://npm.io/package/bind-ui-elements/versions

## README

bind-ui-elements
================
[![npm](https://img.shields.io/npm/v/npm.svg?maxAge=2592000)](https://www.npmjs.com/package/bind-ui-elements)

A small utility method to help bind children elements to a context. For convenience when using module pattern in jQuery

### Install
> npm install --save bind-ui-elements

> `<script src="https://npmcdn.com/bind-ui-elements@1.1.4/dist/index.js"></script>`

##OOP
```
import bindUiElements from 'bind-ui-elements';

class Component {
    constructor($el, config) {
        this.$el = $el;
        this.cfg = Object.assign({}, Component.defaultCfg, config);
        bindUiElements(this);
        this.initalize();
    }
    initalize() {
        //$button now has been attached to component's instance
        this.$button.on('click', function() {

        });

        //$link now has been attached to component's instance
        this.$link.on('click', function() {

        });
    }
}

Component.defaultCfg = {
    ui: {
        $button: '.js-button',
        $link: '.js-link'
    }
}

export default Component;
```
## Singleton

```
var component = {
    cfg: {
        ui: {
            '$button': '.js-button',
            '$link': '.js-link'
        }
    },
    init ($el) {
        this.$el = $el;
        bindUiElements(this);

        //$button now has been attached to component's instance
        this.$button.on('click', function() {

        });

        //$link now has been attached to component's instance
        this.$link.on('click', function() {

        });
    }
};
```

### Test
> npm test

---
_Source: https://npm.io/package/bind-ui-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._