als-wire v1.0.5

Als-Wire

The package deprecated. Use als-bind 3 instead.

About

Als-wire is a very small function for connecting forms and inputs with dom elements through server.

The function based on two modules: 1. als-ajax - for grabbing data and make ajax request 2. als-bind - for binding data on client side

--

Instalation

1. Installing with npm npm i als-wire
2. Adding scripts to html:

<script src="node_modules/als-bind/bind.js"></script>
<script src="node_modules/als-ajax/ajax.js"></script>
<script src="node_modules/als-wire/wire.js"></script>

3. Done

Cdn links:

<script src="https://cdn.jsdelivr.net/npm/als-bind@2.2.1/bind.js"></script>
<script src="https://cdn.jsdelivr.net/npm/als-ajax@1.1.1/ajax.js"></script>
<script src="https://cdn.jsdelivr.net/npm/als-wire@1.0.3/wire.js"></script>

--

Basic use

Base conditions for wire: 1. Input : form or input/select/textarea with names and selector (id or class)

• In case of form, the selector, has to be inside button tag
• action - form or input field must be with action attribute with route to server
• method - by default the method is get. If you need post method, define it with attribute method.

2. Output : Template with attribute or file named as selector or bindSelector and variables inside
   • Variables are the names of input fields and binds inside {{ varName }}

3. Server that return json as {name:value,name:value}

   • Server gets regular reqeust with get and post
   • Here will shown php example, but you can use it with any server that can return json in string format

--

Syntax:

wire(selector,event,bindSelectors,methods,devMode=false) //return Bind object 

• selector : string - id (starts with #) or class(starts with .) of form or input
• event : string - js triger for event listiner, like change,click,input, etc
  • In case of form, dont use "submit" event. Use "click" instead.
• bindSelctors : array - array of selectors for templates or files
  • if bindSelectors == undefined, template attribute selector is selector without # or .
• methods : array - methods for bindings
  • Every variables has option to be computed with function. There are few variants to define the methods.
    • Using method {{ varName@methodName }}
    • Define method variant 1 - regular function inside methods
    • Define method variant 2 - in case of file as template, define methods inside

     <script> 
        data = {
          methodName: function(value) {return value}
              }
      </script>

    Please read als-bind documentation, for more information
• devMode : boolean - if true, in case of error, error and output printed in console. false - by default.

wire() returns Bind object with getters and setters named by name fields in inputs. You can get or change value of every input field, in folowing way:

Html

<input type="text" action="test.php" method="post" name="test" id="test">
<template test><div>{{ test }}</div></template>

JavaScript

let test = wire('#test','input')
console.log(test.test) // get the value
test.$test = 'new value' // set new value

PHP

<?php
echo json_encode(['test'=>$_POST['test']]);

--

Example for submiting and biding form

Html:

<form action="test.php">
    <input type="text" name="name">
    <input type="text" name="email">
    <button id="user">click</button>
</form>

<template user>
    <div>Your name is: {{ name }}</div>
    <div>And your email is: {{ email }}</div>
</template>

JavaScript:

wire('#user','click')

On server side (test.php)

<?php
$output = [
    'name'=>$_GET['name'],
    'email'=>$_GET['email']
    ];
echo json_encode($output);

--

Advanced use with multiple listiners

The first parameter of wire(), can be class. It allows to set multiple listiners. In this case, we can to wire arrays. Here is an example:

<template user>
    <div>Name: {{ name }} and email: {{ email }} updated</div>
</template>

<form action="test.php">
    <input type="hidden" name="id" value="1">
    <input type="text" name="name" value="Alex">
    <input type="text" name="email" value="alex@mail.com">
    <button class="user">update</button>
</form>

<form action="test.php">
    <input type="hidden" name="id" value="2">
    <input type="text" name="name" value="Victor">
    <input type="text" name="email" value="victor@mail.com">
    <button class="user">update</button>
</form>

<script>
    let user = wire('.user','click')
</script>

Advanced use with multimple bindSelectors

The part responsible for binding is als-bind. als-bind gets multimple selectors and methods for computing an binding. wire(selector,event,bindSelectors,methods,devMode=false) You can define few bindSelectors to same variables. In this case, updating bind variables, will update all the binds.

--

Example of multi binding

Third parameter in wire function is bindSelectors and forth - methods. Those parameters allows to bind variables to multiple templates as shown in example bellow.

index.html

<input type="text" name="test" action="test.php" id="test">

<template test><div>{{ test }}</div></template>
<template test1><div>{{ test@hello }}</div></template>

<script>
function hello(test) {
    return 'hello '+test;
}

wire('#test','change',['test','test1','/test2.html'],{hello})
</script>

test2.html

<div>Hello {{ test@someMethod }}</div>

<script>
    data = {
        someMethod:function(test) {
            return test + ' from test2.html'
        }
    }
</script>

test.php

$output = ['test'=>$_GET['test']];
echo json_encode($output);