@wix/velo-bind

Velo Bind

Documentation

velo-bind uses mobx to bring a reactive programming to Velo and bind wix elements.

Installation

This module is aimed to be used in Wix Velo environment.

1. Open a Wix Site
2. Enable Dev Mode
3. Add @wix/velo-bind npm module

Follow the installation instructions to learn more.

Examples

Counter

Given a site with a text element with the ID #counter, a #decrement and #increment buttons:

import { makeAutoObservable, bind } from "@wix/velo-bind";

const state = makeAutoObservable({
  count: 0,
});

const { counter, increment, decrement } = bind($w);
counter.text = () => `${state.count}`;
increment.onClick(() => state.count++);
decrement.onClick(() => state.count--);

Working with repeaters

A Repeater is a special Wix Editor Element which is responsible for generating a list of elements from either a data-set (dynamic) or an array set by Velo code).

import { makeAutoObservable, bind } from "@wix/velo-bind";

const state = makeAutoObservable({
  list: [{ value: "myValue" }],
});
const { repeater } = bind($w);
repeater.item = ($item, data, index) => {
  const { label } = bind($item);
  label.text = () => list[index].value;
};