als-bind

v6.0.0

Published

4 years ago

bind and manage content inside dom elements

0High
0Medium
0Low

alexsorkin

als-bind

Bind 6

Bind 6 builded from scratch and it's something different compared to earlier versions. The main concept of Bind is to bind between dom elements and js variables and methods.

Dom and BindData (form v5, will be published as separated package)

Bind includes 3 classes:

Bind - for bind variables in frontend
BindCollection - for bind collection on frontend
BindNode - for building binds in node.js and then managing it on frontend

Basics

After you have install Bind, include the script in your html and run Bind.bind(vars:object) with your vars. Then, just give bind name to element, and add your variables anywhere on any attribute or innerHTML.

Here is the example, how it works:

<head>
    <script src="node_modules/als-bind/bind.js"></script>
    <script>Bind.bind({test:'Hello world',testClass:'test'})</script>
</head>
<body>
    <div bind="test" class="some {{ testClass }} some1">some {{ $test }} some</div>
    <button onclick="Bind.vars.$test = 'Hello again'">change</button>
</body>

As shown on example above, variable test inside vars binded on element with bind="test". And can be changed by Bind.vars.$test to any other string. Bind.vars includes all vara you have addede with bind method, but in addition if variable is binded, it has the setter with $ too.

For example, you can do the folowing

Bind.vars.$test = Bind.vars.test + 'Have a good day'.

Variables inside objects

You can bind variables from objects and arrays. Here is example how it works:

<script>
    let users = [{name:'Alex', age:20}]
    Bind.bind({users})
</script>
<div bind="test">Hello {{ $users[0].name }}. You are {{ $users[0].age }} years old.</div>
<input type="text" oninput="Bind.vars.users[0].$name = this.value">

Methods inside binds

You can add any method you want, like this:

<script>
    function hello(name,age) {
        return `Hello ${name}. You are ${age} years old.`
    }
    let users = [{name:'Alex', age:20}]
    Bind.bind({users,hello})
</script>
<div bind="test">{{ Bind.vars.hello($users[0].name,$users[0].age) }}</div>
<div bind="test1">{{ $hello($users[0].name,$users[0].age) }}</div>
<div bind="test2">{{ hello($users[0].name,$users[0].age) }}</div>
<input bind="input" type="text" 
oninput="Bind.vars.users[0].$name = this.value" 
value="{{$users[0].name}}">

On example above, shown that you can use fuction from Bind.vars (test and test1) or as function outside the Bind (test2). Also, you can bind the same variables on other binded elements too (bind=input,test,test1,test2)

Binded elements

All binded elements stored inside Bind.binds as Bind.binds{bindName:element}. For example you can do the folowing:

Bind.binds.test2.remove()

Bind innerHtml with elements

In case you bind variable inside child of bind element, every time you set new value, all bind element changing.

<div bind="test">
    some
    <span>{{$test}}</span>
    some
</div>

On example above, every time you will change Bind.vars.$test, [bind="test"]'s innerHtml will change include the element inside.

BindCollection

BindCollection is a separated class inside bind.js. To use it, you need to set seccond parameter on Bind.bind as true and then to use template for bindidng array. Here is the example:

<script>
    Bind.bind(
        {colors:['red','green','blue']},
        true
    )
</script>
<body>
   <template collection-template="colors">
      <div>
         <span bind="color" style="color:{{ $colors[index] }};">{{ $colors[index] }}</span>
      </div>
   </template>
</body>

On example above, second parameter is true, and Bind look for template[collection-template] elements. It takes first element in template as template and then place binded clones before the template element. Now you can mange the collection with :

Collection methods:

Bind.vars.colors.remove(index)
Bind.vars.colors.add(object)
Bind.vars.colors.next(index)
Bind.vars.colors.prev(index)
Bind.vars.colors.move(from,to)

index stored in clone main element as clone.index.

Here another example:

   <script src="users.js"></script>
   <script>Bind.bind({
      users,
      getUserName: index => Bind.vars.users[index].name,
      },true)</script>
</head>
<body>
   <template collection-template="users">
      <div>
         <div id="test">Some</div>
         <div bind="user">User name: {{ $users[index].name }}</div>
         <div bind="user">User name: {{ $users[index].age }}</div>
         <button onclick="console.log(this.parentNode.index)">index</button>
         <button onclick="Bind.vars.users.remove(this.parentNode.index)">remove</button>
         <button onclick="Bind.vars.users.prev(this.parentNode.index)">prev</button>
         <button onclick="Bind.vars.users.next(this.parentNode.index)">next</button>
      </div>
   </template>
   <hr>
   <div><input type="text" oninput="Bind.vars.users[2].$name = this.value"></div>
   <div><button onclick="add()">Add</button></div>
   <script>
      function add() {
         Bind.vars.users.add({
         "age": 25,
         "name": "Super puper",
         })
      }
   </script>
</body>

BindNode

let BindNode = require('als-bind')

let newDocument = BindNode.bind(/*html*/`
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Test</title>
   <script src="/node_modules/als-bind/bind.js"></script>
</head>
<body>
   <div>
      <div bind="aa">{{ $hello($user.name,$user.age) }}</div>
      <div bind="aa1">{{ $user.name }}</div>
      <button onclick="Bind.vars.user.$age = Bind.vars.user.age+1">older</button>
      <button onclick="Bind.vars.user.$age = Bind.vars.user.age-1">younger</button>
   </div>
   <input bind="input" type="text" oninput="Bind.vars.user.$name = this.value" value="{{ $user.name }}">
</body>
</html>
`,{
   user:{name:'Alex',age:35},
   hello:(name,age)=>`Hello ${name}. How are you? Your age is ${age}.`,
})

require('fs').writeFileSync('test.html',newDocument)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme