osws-markup v0.0.1

OSWSMarkup / osws-markup

0.0.1

Native JavaScript HTML templating.

NPM

The recommended extension for templates: *.markup.js.

The module does not know what tags are paired, which are not. If the description of the tag you specify body argument to the tag will be considered a double as<div> </ div>, otherwise sluchaae single as<br/>.

To render using a nested object markup.renderer.

Usage

var markup = new Markup();

// String encapsulation.
// Drawn at the announcement.
markup.tag("div.string", "content");

// Simple encapsulation.
// Drawn at the announcement. 
var simpleCounter = false;
markup.tag("div.simple", function() {
    if (!simpleCounter) {
        simpleCounter = true;
        markup.tag("input",{type: "checkbox", name: "age", value: "17"});
    } else {
        markup.tag("br");
    }
});

// Synchronous encapsulation.
// Drawn when calling `markup.renderer.render`.
var asyncCounter = false;
markup.tag("div.sync", function(markup) {
    if (!asyncCounter) {
        asyncCounter = true;
        markup.tag("div", "");
    } else {
        markup.tag("br");
    }
});

// Asynchronous encapsulation.
// Drawn when calling `markup.renderer.render`.
var asyncCounter = false;
markup.tag("div.async", function(markup, callback) {
    if (!asyncCounter) {
        asyncCounter = true;
        markup.tag("div", "");
        callback();
    } else {
        markup.tag("br");
        callback();
    }
});

// First rendering gives one result. 
markup.renderer.render(function(error, result) {
    result // <div class="string">content</div><div class="simple"><input type="checkbox" name="age" value="17"/></div><div class="sync"><div></div></div><div class="async"><div></div></div>
    // The second rendering gives a different result.
    markup.renderer.render(function(error, result) {
        result // <div class="string">content</div><div class="simple"><input type="checkbox" name="age" value="17"/></div><div class="sync"><br/></div><div class="async"><br/></div>
        done();
    })
});

API

Require

Node.js

var Markup = require("OSWSMarkup");

Window

<script src="osws-markup.js"> or <script src="osws-markup.min.js">

var Markup = OSWSMarkup;

Require.js

require(["osws-markup.js"], function(Markup) {});

Custom

You can also use the file ./sources/markup.js for self-assembly.

Constructor

new Markup(?Object OSWSRenderer renderer);

By default generate a new OSWSRenderer.

var markup = new Markup();

However, you can transfer your OSWSRenderer when creating an instance.

var markup = new Markup(renderer);

Or to override it manually.

markup.renderer = new Renderer();

markup.tag(String selector, ?Object attr, ?String/Function()/Function(markup)/Function(markup, callback) body);

Generator HTML tags.

selector

This argument allows you to specify the short name of the tag and attributes class and id.

markup.tag("imput.error#age.age18");
// <imput class="error age18" id="age" />

body

markup.tag("div.menu#top-menu","OSWSMarkup");
// <div class="menu" id="top-menu">OSWSMarkup</div>

Simple encapsulation.

Drawn at the announcement.

markup.tag("div.menu#top-menu",function() {
    return "OSWSMarkup"
});

Synchronous encapsulation.

Drawn when calling markup.renderer.render.

markup.tag("div.menu#top-menu",function(markup) {
    markup.renderer.addString("OSWSMarkup");
});

Asynchronous encapsulation.

Drawn when calling markup.renderer.render.

markup.tag("div.menu#top-menu",function(markup, callback) {
    markup.renderer.addString("OSWSMarkup");
    callback();
});

But.

markup.tag("div.menu#top-menu");
// <div class="menu" id="top-menu"/>

To generate a pair of tags is necessary to specify the argument body.

markup.tag("div.menu#top-menu","");
// <div class="menu" id="top-menu"></div>

attr

markup.tag("imput.error",{ type: "checkbox", name: "age", value: "18" });
// <imput class="error" type="checkbox" name="age" value="18" />

Tests

Server

Please install mocha.

npm install -g mocha mocha --reporter spec tests

Compile

• npm install -g gulp
• gulp

Changes

0.0.0

• Operating base to generate HTML tags.