Autowire

Wire HTML nodes to javascript classes, automatically setting up click-listeners.

This project is mostly done and is unlikely to receive many updates. It is simple, and small, and does what it is supposed to. It will receive bug fixes, MAY receive minor feature additions, MAY have tests added to it, and MAY received documentation improvements.

Documentation (below)

• Example
• Install
• Usage & API Reference
  • Overrides
  • Properties
  • Instance Methods
  • Static Methods
  • Internal

Example

To use autowire, you'll create a sub-class, then instantiate it with a node object, or autowire it with a query selector.

Simple button-counter:

<div class="Counter">  
    <p>Count: <span class="count"></span></p>  
    <button>Plus 1</button>  
    <button>Minus 1</button>  
</div>  
<script type="text/javascript">new MyCounter(document.querySelector('div.Counter')); </script>  

Then the Autowire class to handle it:

class MyCounter extends Autowire {  
  
    get count_node(){return this.n.querySelector('.count'); }  
    get count(){return Number(this.count_node.innerText); }  
    set count(count){this.count_node.innerText = count; }  
      
    function onclick(event){  
        if (event.target.innerText == 'Plus 1'){  
            this.count = this.count + 1;  
        } else if (event.target.innerText == 'Minus 1'){  
            this.count = this.count - 1;  
        }  
    }  
}  

Install

NPM: Not available
Yarn: Not Available

Manual Install

1. Copy+paste Autowire.js into your project & setup a route to it. (or git clone!)
2. Include <script src="/autowire.js"></script> in your page

PHP / Composer Install

1. composer require taeluf/js.autowire
2. Then in php:

   <?php  
   // pass a different name to get an extension's file path.  
   $autowire_file_path = Tlf\Js\Autowire::filePath('Autowire.js');  
   $your_router->addRoute('/autowire.js', $autowire_file_path);  
   

3. Include <script src="/autowire.js"></script> in your page

Usage / API Reference

To use autowire, simply create a class that extends Autowire, then implement event listeners & fill out your class

Overrides

• constructor(node, ...args) - Do not override the constructor
• onCreate(node, ...args) - Initialize your class BEFORE event listeners are setup, AFTER this.node is set
• onAttach(node, ...args) - Initialize your class AFTER listeners are setup.
• onReady(node, ...args) - Called when all pending Autowire attachments have been completed. This is ONLY called if your object was setup via YourSubclass.autowire(querySelector, ...args) or YourSubclass.attachSelector(querySelector, ...args)

Properties

• this.name the class name of autowire subclass
• this.node the Node your instance is attached to
• this.n shorthand for this.node
• this.innerHtml shorthand for this.node.innerHtml

Instance Methods

• this.getObjects(object_class_name) Get Autowire objects that are a descendent of this.node that have the given object_class_name
• this.getObject(object_class_name) Shorthand for this.getObjects(object_class_name)[0]
• this.getGlobalObjects(object_class_name) Get Autowire objects that have the given object_class_name
• await this.fetchJson(url, params=[], method="POST")
• await this.fetchText(url, params=[], method="POST")
• await fetch(url, params, method="POST")

Static Methods

Where YourClass is used, it should be a subclass of Autowire. Where Autowire is used, Autowire should be used.

• YourClass.autowire(querySelector, onPageLoad=true, ...args) - attach YourClass to nodes returned by the querySelector. Optionally waits until page is loaded.
• YourClass.attachSelector(querySelector, ...args) - attach YourClass to nodes returned by the query selector.
• YourClass.attachTemplate(querySelector, ...args) - Clone a template and attach a new instance of this class to it. It works with any node. If a <template> has more than one root node, they will be wrapped in a <div>
• Autowire.onPageLoad(func, thisArg, ...args)
• Autowire.getMethods(javascript_object)

Internal

These are used internally

• Autowire.addParamsToFormData(formData, params)
• Autowire.getObjects(object_class_name=null,parentObject=null)
• Autowire.getObjectFromNode(node)
• Autowire.readyUpAllObjects()
• Autowire.attach(autowire_object)