The idea is to provide few simple UI tools. Inspired by http://youmightnotneedjquery.com/ and angularjs v1
This can glue html and javascript seamlessly syntax is like angularjs version 1.
Code is very small and simple.
For now see test.html for an example
- It is very light weight compared to any standard view-model kind of libraries.
- Handles many view-model glue scenarions.
- Simple to use.
- Helpful for component/modular/widget based development.
- It is independent.
This function makes an instantiable object(as a class object).
User can define a controlling function. context will be passed to this function with few util functions that can be used to glue. Also context will be returned to the instance object created for this. So all the following functions will be available in the instance too.
Provide property name to get its value.
Provide property name and value to set that property. This triggers binding value to DOM.
A reference to the source object where $get and $set executes.
Note: do not try to set things directly to this property if you want glue to work for this property.
This provides a refenece to the array of elements glued for this component instance.
this can be instantiated using
document.querySelectorAll().
This provides id generated by glue for this component instance.
This provides name assiged by user or generated by glue for this component.
This provides reference to options assiged by user for this component.
This provides reference to options assiged by user for this component.
This adds a personal CSS for this component.
This detaches previous elements and creates new DOM out of htmlString provided and glues it to the context.
This detaches previous elements and glues it to the new set of elements provided.
This provides the reference to all the events that are attached.
This function makes glue detach events by namespace. If namespace is not provided, glue detaches all events of this component instance.
This provides the reference to all the properties that are bound for this component instance.
This function makes glue detach property bindings by namespace. If namespace is not provided, glue detaches all property bindings of this component instance.
This function should be called to purge the component instance properly.
User can assign a css style definition string. glue adds this stylesheet to DOM when the first instance would be made.
Note: we are not doing any preprocessing yet. So user will have to make the stylesheet having styles along with the component name. Component name can be provided with
options.nameproperty.
User can assign a html string. glue will create DOM elements and glues it up with the controller.
User can assign a name to component. glue adds this name to the root element. So this can be used to write styles as you need that can be specific to the component.
Note: all the instances made from this component will have same name.
User can assign elements already loaded into DOM using document.querySelectorAll('<selector>')
Personal stylesheet adding function.
Accepts css string, id to be maintained and style element if we already have any.
Returns style element.
Detaches events for a glue context or instance by namespace. If namespace is not given, then glue detaches all the events.
Accepts glue context and namespace.
Detaches one event for a glue context or instance.
Accepts event name, HTML element object, handler callback function and a glue context.
Removes property bindings for a glue context or instance by namespace. If namespace is not given, then glue removes all the property bindings.
Accepts glue context and namespace string.
Applies property bindings. if prop and value are not provided, it will apply for all the properties
Accepts glue context, property name string and value object.
Adds class to a HTML element.
Accepts HTML element and class name string.
Empties conetents of an element.
Accepts HTML element.
Links all the binders noticed in the element.
Accepts HTML element, glue context and namespace string.
Attaches all events noticed in the element.
Accepts HTML element, glue context and namespace string.
Attaches one event.
Accepts events name string, HTML element, handler callback, glue context and namespace string.
Adds the event handler to the listners cache.
Accepts events name string, HTML element, handler callback, glue context and namespace string.
Can define a new binder.
name will be checked in attributes.
callback will be called only once while instantiation and expects the callback to return a callback for updating on value change.
e.g.
addBinder('bind-text', function(el, prop, context) {
return function(value) {
el.innerText = definitelyGetString(value);
}
});
Like angularjs v1's attribute based directives glue allows some attribute binders.
Binds text to the html from the property assigned.
e.g. <span bind-text="myName"></span>
use context.set('myName', 'the bhaskara') in your controller to set its value.
Binds html string to the html from the property assigned. also applies all the binders and events inside it.
e.g. <div bind-html="myTemplate"></div>
use context.set('myTemplate', '<span>the bhaskara is great!</span>') in your controller to set its value.
Bind property is like ng-model in angularjs. It binds the value of any input element to the property and vice-versa also gets handled.
e.g. <input type='text' bind-property="username" >
use context.get('username') in your controller to get its value.
Binds a glue component instance to the element.
e.g. <div bind-component="myComponent" ></div>
use context.set('myComponent', new SomeGlueComponent()) in your controller to bind this component.
glue allows attribute based event attaching.
Binds event of the element to the handler callback from the glue context.
e.g. <div click-handle="clicked" ></div>
use context.clicked = function(event){ window.alert('clicked!') } in your controller to bind this event
- make more binders
- optimize the functions
- make css framework.
- make components like dropdown, table, toggle button, etc.