DaBi (short for Data Binding) is a dead simple yet complete and self-contained DOM-to-JS and JS-to-DOM data binding library in just 25 lines of pure ES5 and 454 bytes when minified.
Download it right here or include it into your HTML:
| function add_toolbar_items($wp_admin_bar) { | |
| $wp_admin_bar->add_node( array( | |
| 'id' => 'supportlink', | |
| 'title' => 'Contact support', | |
| 'href' => 'mailto:[email protected]', | |
| ) ); | |
| } | |
| add_action('admin_bar_menu', 'add_toolbar_items', 999); |
| <?php | |
| // enqueue these scripts and styles before admin_head | |
| wp_enqueue_script( 'jquery-ui-dialog' ); // jquery and jquery-ui should be dependencies, didn't check though... | |
| wp_enqueue_style( 'wp-jquery-ui-dialog' ); | |
| ?> | |
| <!-- The modal / dialog box, hidden somewhere near the footer --> | |
| <div id="my-dialog" class="hidden" style="max-width:800px"> | |
| <h3>Dialog content</h3> | |
| <p>This is some terribly exciting content inside this dialog. Don't you agree?</p> |
DaBi (short for Data Binding) is a dead simple yet complete and self-contained DOM-to-JS and JS-to-DOM data binding library in just 25 lines of pure ES5 and 454 bytes when minified.
Download it right here or include it into your HTML:
| /** | |
| * @param {object} scope - Object that all bound data will be attached to. | |
| */ | |
| function twoWayBind(scope) { | |
| // a list of all bindings used in the DOM | |
| // @example | |
| // { 'person.name': [<input type="text" data-bind="person.name"/>] } | |
| var bindings = {}; | |
| // each bindings old value to be compared for changes |
| /* bling.js */ | |
| window.$ = document.querySelector.bind(document); | |
| window.$$ = document.querySelectorAll.bind(document); | |
| Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); }; | |
| NodeList.prototype.__proto__ = Array.prototype; | |
| NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); }; |
You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:
var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }
console.log(getN()); // 5
setN(10);
| Windows Registry Editor Version 5.00 | |
| ; | |
| ; Adds 'Open in Atom' to context menu (when you right click) in Windows Explorer. | |
| ; | |
| ; Based on https://github.com/Zren/atom-windows-context-menu. It didn't work | |
| ; https://github.com/Zren/atom-windows-context-menu/issues/1. | |
| ; | |
| ; Save this file to disk with a .reg extension. Replace C:\\Atom\\atom.exe with | |
| ; the path to the atom executable on your machine. |
| function toJSON(node) { | |
| let propFix = { for: 'htmlFor', class: 'className' }; | |
| let specialGetters = { | |
| style: (node) => node.style.cssText, | |
| }; | |
| let attrDefaultValues = { style: '' }; | |
| let obj = { | |
| nodeType: node.nodeType, | |
| }; | |
| if (node.tagName) { |
| // array style, just list the damned questions! | |
| var questions = [ | |
| { | |
| question: "What color is Pikachu?", | |
| answers: ["Light Blue", "Brown", "Yellow", "Green"], | |
| solution: "Yellow" | |
| } | |
| , | |
| { | |
| question: "What color is Squirtle?", |