velo-bind

velo-bind

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 velo-bind npm module

Follow the installation instuctions to learn more.

Examples

Counter:

import { makeAutoObservable, bind } from "velo-bind";

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

const { counter, increment, decrement } = bind($w);
counter.text = () => `${state.count}`;
increment.onClick(() => model.count++);
decrement.onClick(() => model.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 "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;
};