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

  

  • PDF version
  • PNG version
  • Source code
  • Online demo (folder)
  • Online demo (list)
  • Online demo (deck)

• codepen

  • http://codepen.io/dexteryy/pen/niuCG

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

• via bower - bower install darkdom
• via istatic

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.state
      • data.content
      • data.component
      • data.context
• 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() -- see component.state
• guard.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 --
• root.updateDarkStates() --
• root.updateDarkDOM() --
• root.feedDarkDOM(sourceData) --
• root.feedDarkDOM(function(sourceData){...}) --
• root.responseDarkDOM(updateEvent, function(changes){...}) -- see component.response
• root.addEventListener(darkEvent, handler)
  • darkEvent --
    • darkdom:willMount --
    • darkdom:mounted --
    • darkdom:willUpdate --
    • darkdom:updated --
    • darkdom:rendered --
    • darkdom:removed --

More coming soon...

More References

See OzJS Project Homepage

Release History

See OzJS Release History

License

Copyright (c) 2010 - 2014 dexteryy
Licensed under the MIT license.