template-binding

Install

NPM

1npm install @iyulab/template-binding

How to use

1import { bind } from '@iyulab/template-binding';
2
3const props = {
4  innerText: "{{title}}",
5  style: { "background": "{{color}}" }
6};
7const data = {
8  title: "hello",
9  color: "red"
10};
11
12bind.binding({
13  target: this.header, // h1, div, DOM-element, anything...
14  props: props,
15  data: data
16});

Use Expression Syntax

This library uses the JSONata expression syntax. See https://docs.jsonata.org/overview.html

Observable

object to an Observable object with a callback function.

1import { observable } from '@iyulab/template-binding';
2
3function onChangedValue(data: any, onChangedValue: any): any {
4  console.log('onChangedValue', data, onChangedValue);
5}
6
7const data = {
8  title: "hello"
9};
10observable(data, onChangedValue);
11
12data.title = "world";

Log

1onChangedValue {title: 'world'}title: "world"[[Prototype]]: Object {property: 'title', oldValue: 'hello', value: 'world'}

And more...

See the sample site https://template-binding.github.io/