# weex-bindingx

> bindingx,expression,binding,weex

Latest version **0.0.49** (published 2018-11-08) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install weex-bindingx
pnpm add weex-bindingx
yarn add weex-bindingx
bun add weex-bindingx
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.49 |
| Published | 2018-11-08 |
| First published | 2018-02-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 305.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1269 |
| Maintainers | chuyi, huxiaoqi |
| Keywords | bindingx, expression, binding, weex |

## Links

- npm: https://www.npmjs.com/package/weex-bindingx
- Repository: https://github.com/alibaba/bindingx
- Homepage: https://github.com/alibaba/bindingx#readme
- Issues: https://github.com/alibaba/bindingx/issues
- npm.io page: https://npm.io/package/weex-bindingx

## Dependencies (5)

- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [simple-lodash](https://npm.io/package/simple-lodash.md) ^0.0.2
- [universal-env](https://npm.io/package/universal-env.md) 0.x.x
- [bindingx-parser](https://npm.io/package/bindingx-parser.md) 0.x.x
- [bindingx-web-polyfill](https://npm.io/package/bindingx-web-polyfill.md) 0.x.x

## Recent versions

- 0.0.49 (latest) — 2018-11-08
- 0.0.48 — 2018-10-10
- 0.0.47 — 2018-09-30
- 0.0.46 — 2018-09-28
- 0.0.45 — 2018-09-18
- 0.0.44 — 2018-08-15
- 0.0.43 — 2018-08-15
- 0.0.42 — 2018-08-14
- 0.0.41 — 2018-08-07
- 0.0.40 — 2018-07-25
- 0.0.39 — 2018-07-25
- 0.0.38 — 2018-07-12
- 0.0.37 — 2018-06-28
- 0.0.36 — 2018-06-28
- 0.0.35 — 2018-06-27
- … 25 more at https://npm.io/package/weex-bindingx/versions

## README

# weex-bindingx

## Install

```bash
$ npm install weex-bindingx --save
```

## Usage

```jsx
import bindingx from 'weex-bindingx';
```


## API


### Methods

|name|args|returns|description|
|:---------------|:--------|:----|:----------|
|prepare|{object} options|{object}|prepare bindingx|
|bind|{object} options|{object}|bind an expression|
|unbind|{object} options| void |unbind an expression|
|unbindAll|| void |unbind for all|

### Arguments Introduction

#### options

##### anchor {ElementReference|HTMLElement}

- element to trigger the animation ，
  - pass the element in web,such as ``` findDOMNode(this.refs.block) ```
  - pass the element ref in weex, `findDOMNode(this.refs.block).ref`

##### eventType {String}

- pass the type of event to trigger the binding, like `scroll`,`pan`,`timing`,`orientation`

##### instanceId {String}

- pass the instanceId in weex, you can use `document.id` to get it，you should't pass it in web

##### options {Object}

- option configs for binding
  - touchAction (web support only) ,you can pass `auto` or `pan-x` or `pan-y`,default value is `auto`
  - thresholdX (web support only)  default value is `10`,it means the `panstart` event won't be triggerred until the distance of touchmove `>10`
  - thresholdY (web support only)  default value is`10`
  - touchActionRatio (web support only) default value is `0.5`, it means the ratio of width/height

##### props {Array}

- elements for animation
   - element {ElementReference|HTMLElement}
  - expression {String|Object}
    - origin {String} bindingx expression
    - transformed {String}
  - property {String} property for animation
  - instanceId


## Example

### RAX

```jsx
import {createElement, Component, render} from 'rax';
import bindingx from 'weex-bindingx';
import View from 'rax-view';
import {isWeex} from 'universal-env';

function getEl(el){
   return isWeex ? findDOMNode(el).ref : findDOMNode(el);
}

class App extends Component {

  x = 0;
  y = 0;

  componentDidMount(){
    this.bindEl();
  }

  onTouchStart(){
    this.bindEl();
  }

  bindEl(){
    let blockEl = getEl(this.refs.block);
    let token = bindingx.bind({
      anchor: blockEl,
      eventType: 'pan',
      props: [
        {
          element: blockEl,
          property: 'transform.translateX',
          expression: `x+${this.x}`
        },
        {
          element: blockEl,
          property: 'transform.translateY',
          expression: `y+${this.y}`
        }]
      },(e)=>{

      if (e.state === 'end') {
        this.x += e.deltaX;
        this.y += e.deltaY;
      }

    });

  }

  render(){
     return (<View onTouchStart={(e) => this.onTouchStart(e)} ref="block" style={{
            position: 'absolute',
            left: 0,
            top: 0,
            width: 300,
            height: 300,
            backgroundColor: 'red'
      }}>block</View>)
  }
}

render(<App />);
```

### Vue

```
<template>
    <scroller class="scroller" >
        <div :ref="'box'" class="box" @touchstart="ontouchstart"  @appear="onappear"></div>
    </scroller>
</template>

<style scoped>
    .scroller {
        flex: 1;

    }
    .box {
        border-width: 2px;
        border-style: solid;
        border-color: #BBBBBB;
        width: 250px;
        height: 250px;
        margin-top: 250px;
        margin-left: 250px;
        background-color: #EEEEEE;
        margin-bottom:500px;
    }
</style>

<script>
  import {isWeex} from 'universal-env';
  import bindingx from 'weex-bindingx';

  function getEl(el) {
    if (typeof el === 'string' || typeof el === 'number') return el;
    return isWeex ? el.ref : el instanceof HTMLElement ? el : el.$el;
  }


  export default {
    data () {
      return {
        x: 0,
        y: 0,
        flag: 0
      }
    },
    methods: {
      onappear () {
        this.bind();
      },
      bind () {
        var box = getEl(this.$refs.box);
        bindingx.bind({
          anchor: box,
          eventType: 'pan',
          props: [
            {
              element: box,
              property: 'transform.translateX',
              expression: {
                origin: `x+${this.x}`,
                transformed: `{\"type\":\"+\",\"children\":[{\"type\":\"Identifier\",\"value\":\"x\"},{\"type\":\"NumericLiteral\",\"value\":\"${this.x}\"}]}`
              }
            },
            {
              element: box,
              property: 'transform.translateY',
              expression: {
                origin: `y+${this.y}`,
                transformed: `{\"type\":\"+\",\"children\":[{\"type\":\"Identifier\",\"value\":\"y\"},{\"type\":\"NumericLiteral\",\"value\":\"${this.y}\"}]}`
              }
            }
          ]
        }, (e) => {
          if (e.state === 'end') {
            this.x += e.deltaX;
            this.y += e.deltaY;
          }
        });
      },
      ontouchstart (event) {
        this.bind();
      }
    }
  }
</script>

```

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