DarkDOM
- Design your own markup languages on a higher level of abstraction than HTML
- Build responsive cross-screen UI components
- Better separation of concerns
- Separate the presentation layer and business layer from the traditional content layer
Usages and Examples
-
Learning DarkDOM Visually
-
codepen
Components Library
CardKit is a mobile UI library provides a series of building blocks to help you build mobile web apps quickly and simply, or transfer entire website to mobile-first web app for touch devices.
CardKit building blocks are all use-html-as-configure-style (like Custom Elements, directive...) components built on DarkDOM and Moui.
AMD and OzJS
- DarkDOM can either be viewed as an independent library, or as a part of OzJS mirco-framework.
- It's wrapped as a number of mutually independent AMD (Asynchronous Module Definition) modules. You should use them with oz.js (or require.js or similar for handling dependencies).
- If you want to make them available for both other AMD code and traditional code based on global namespace. OzJS provides a mini define/require implementation to transform AMD module into traditional module pattern.
- See http://ozjs.org for details.
Get the code
Add to your project as new dependency
Or download directly from Github
Dependencies
- mo/lang/es5
- mo/lang/mix
- dollar (or other jQuery-compatible library + dollar/jquery)
API and Usage
DarkComponent API
var darkdom = require('darkdom');
var component = darkdom(options); // see component.set(options)component.set(options)--- options --
unique: false--enableSource: false--entireAsContent: false--sourceAsContent: false--render: function(data){ return '<...>...</...>'; }--data.statedata.contentdata.componentdata.context
- options --
component.state(stateName, attrName)--component.state(stateName, getter, setter)--component.state({ stateName: attrName, stateName: getter, stateName: [getter, setter], ... })--component.contain(childComponentName, otherComponent)--component.contain(childComponentName, function(childComponent){ ...;return childComponent; })--component.contain({ childComponentName: otherComponent, ... })--component.forward('eventType selector', eventName)--component.response(updateEvent, function(changes){ ...; return resolved; })--- updateEvent -- "state:name", "component:name", "content", "remove"...
- changes --
- resolved --
component.component(childComponentName)--component.createGuard()--
DarkGuard API
var guard = component.createGuard();guard.state()-- seecomponent.stateguard.component(childComponentName, function(childGuard){ /*spec*/ })--guard.component({ childComponentName: spec, ... })--guard.forward(eventName, 'eventType selector')--guard.forward(eventName, handler)--guard.source()--guard.watch(selector)--guard.watch(element)--guard.unwatch(selector)--guard.unwatch(element)--guard.unwatch()--guard.mount()--guard.unmount()--guard.update()--guard.render()--guard.stateGetter(name)--guard.stateSetter(name)--guard.createRoot()--guard.createSource()--
DOM API
var root = $(selector)[0];
guard.watch(root);root.darkGuard()--root.mountDarkDOM()--root.unmountDarkDOM()--root.resetDarkDOM()--root.getDarkState(name)--root.setDarkState(name, value, options)--- options --
update: false--
- options --
root.updateDarkStates()--root.updateDarkDOM()--root.feedDarkDOM(sourceData)--root.feedDarkDOM(function(sourceData){...})--root.responseDarkDOM(updateEvent, function(changes){...})-- seecomponent.responseroot.addEventListener(darkEvent, handler)- darkEvent --
darkdom:willMount--darkdom:mounted--darkdom:willUpdate--darkdom:updated--darkdom:rendered--darkdom:removed--
- darkEvent --
More coming soon...
More References
Release History
License
Copyright (c) 2010 - 2014 dexteryy
Licensed under the MIT license.