# marko-bind

> Marko custom attribute to bind an input to component state.

Latest version **0.1.0** (published 2018-01-24) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install marko-bind
pnpm add marko-bind
yarn add marko-bind
bun add marko-bind
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-01-24 |
| First published | 2018-01-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Max Milton |
| Maintainers | maxmilton |
| Keywords | marko, wearegenki |

## Links

- npm: https://www.npmjs.com/package/marko-bind
- Repository: https://github.com/WeAreGenki/marko-bind
- Homepage: https://wearegenki.com/pro#OpenSource
- Issues: https://github.com/WeAreGenki/marko-bind/issues
- npm.io page: https://npm.io/package/marko-bind

## Recent versions

- 0.1.0 (latest) — 2018-01-24
- 0.0.0 — 2018-01-23

## README

# `marko-bind`

[Markojs](https://markojs.com) custom attribute to bind an input's value and events to a component state.

## Overview

Simply use the `bind()` directive on any form input, select, or textarea element for quick and easy reactive data binding. You don't need to worry about any special or edge cases as it's all handled internally. No more need to repeatedly set up finicky custom event bindings, just focus on being productive!

This package tries to do as much as possible during compile time resulting in little overhead via a very small runtime module.

Since Marko doesn't come with anything out-of-the-box, this marko package provides an easy way to do so. For the discussion about the feature see [github.com/marko-js/marko/issues/676](https://github.com/marko-js/marko/issues/676).

The tag handling logic was very much inspired by [Vue.js's `v-model` directive](https://github.com/vuejs/vue/blob/master/src/platforms/web/compiler/directives/model.js).

_NOTE: The tag and edge case handling is currently a work in progress. Most input tags already work great out of the box though!_

## Usage

### Install

You only need to add it to your project, Marko is smart enough to find the tag automatically when you use it in components.

```shell
npm install marko-bind
# OR
yarn add marko-bind
```

### Use in components

Set the component state then use the `bind` directive as an attribute on your input element. Example:

```marko
class {
  onCreate() {
    this.state = {
      uname: '',
    };
  }
}

<input bind('uname') type="text" name="username"/>
```

For the attribute value you can use whatever makes sense to your application. String values will resolve automatically to your component state. You can also pass in the state object directly:

```marko
<input bind(state.uname) type="text" name="username"/>
```

It's also possible to use a dynamic JavaScript expression or reference a component method. This can also return either a string or the state object. One caveat with this is because the attribute value is evaluated at runtime we need to include an additional runtime module to bind the input state and events. Example:

```marko
class {
  onCreate() {
    this.state = {
      uname: '',
    };
  }

  someMethod() {
    return this.state.uname;
  }
}

<input bind(someMethod) type="text" name="username"/>
```

## Licence

`marko-bind` is an Apache-2.0 licensed open source project. See [LICENCE](https://github.com/WeAreGenki/ui/blob/master/LICENCE).

-----

© 2018 [We Are Genki](https://wearegenki.com)

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