BoundComponent Injection

The BoundComponent class contains the basics needed for attribute-based one-way and two-way binding of rendering to a view model. The inject() and injectBind() (both basically aliases for the same thing) provide an easy way to convert a lot of HTML on a page to BoundComponents in one go, being little more than a wrapper around document.querySelectorAll() and new BoundComponent().

This div is a .
This div is a .
This div is also a .
Would you believe it, but this div is totally a .
This div is a . because it always goes along with the crowd.

The inject() method is an override for the inject() method on the base Component class. It takes one additional property, the view model for the component. Because it needs to be compatible with the base class (JS/TS doesn't have proper overloading), the viewModel is at the end. You can use keyword arguments to avoid having to fill all the arguments.

The injectBind() method calls inject(), except that the viewModel is the first property. This means you don't have to use keyword arguments or dummy in undefined.

Link to the demo script

API

Code Type Detail
inject(selector = '[ichigo]', options?, constructor?, viewModel?) static method

The inject method can be used to construct a single bound component (where it is not very useful) or multiple components from currently existing HTML elements.

  • selector: This selects the HTML elements to be modified. This can be a CSS selector to be passed into document.querySelectorAll(), a single element, a nodelist (the result of document.querySelectorAll()), or an array. If "selector" is a string and "parent" is included in options, this translates to parent.querySelectorAll(selector).
  • options: options to be passed into the bound component constructor. When injecting, you can set replace to true and include HTML for the new component, which deletes the existing element and uses the supplied HTML instead. If you send a string, this is the same as if you sent outerHtml and replace: true.
  • constructor: constructor of the bound component class, if the constructed component is to be a different type of component. If not provided, the current component class is used.
  • viewModel: view model for the bound component, which is an MVVM view. This can be left out (it has to be, because of its place in the argument list), but the component is almost completely useless as a result.
The return value is always an array of components, because inject() allows multiple replacements at a time (it's the very reason it was created).

injectBind(viewModel, selector = '[ichigo]', options?, constructor?) static method

The inject method can be used to construct a single bpund component (where it is not very useful) or multiple components from currently existing HTML elements.

  • viewModel: view model for the bound component, which is an MVVM view
  • selector: This selects the HTML elements to be modified. This can be a CSS selector to be passed into document.querySelectorAll(), a single element, a nodelist (the result of document.querySelectorAll()), or an array. If "selector" is a string and "parent" is included in options, this translates to parent.querySelectorAll(selector). The default, [ichigo], matches any element with an attribute named 'ichigo' in it.
  • options: options to be passed into the bound component constructor. When injecting, you can set replace to true and include HTML for the new component, which deletes the existing element and uses the supplied HTML instead. If you send a string, this is the same as if you sent outerHtml and replace: true.
  • constructor: constructor of the bound component class, if the constructed component is to be a different type of component. If not provided, the current component class is used.
The return value is always an array of components, because inject() allows multiple replacements at a time (it's the very reason it was created).

Type definitions