Skip to content

0.0.4

Jump to bottom
Ivan S Glazunov edited this page Jan 22, 2015 · 1 revision

OSWS Templates

version: 0.0.4 beta

Why?

  • On pure JavaScript.
  • Reconfigurable at any time.
  • Does not require learning new languages.
  • Allows you to work with asynchronous data. *Reusing structures elements.

How?

Install

npm install osws-templates

Include

TypeScript
/// <reference path="node_modules/osws-templates/templates.d.ts" />
import Templates = require('osws-templates');

Commonjs (Node.js)

JavaScript
var Templates = require('osws-templates');

Require.js

JavaScript
define('osws-templates', function(Templates) {});

What?

Tags.

The items are sorted into the following categories:

Templates.single

Contains: br hr img input base frame link meta

Syntax

([selector: string], [attributes: object]) => instanceof Element

img('.circle[src=img.jpg]').render(console.log) // <img class="circle" img="img.jpg"/>
Templates.double

Contains: html body h1 h2 h3 h4 h5 h6 hgroup div p address blockquote pre ul ol li dl dt dd fieldset legend form noscript object table thead tbody tfoot tr td th col colgroup caption span b big strong i var cite em q del s strike tt code kbd samp small sub sup dfn bdo abbr acronym a button textarea select option article aside figcaption figure footer header section main nav menu audio video embed canvas output details summary mark meter progress template comment

Syntax

([selector: string], [attributes: object]) => (...content: Array<selector:string|Prototype|Queues.Queue|Queues.ISyncCallback|Queues.IAsyncCallback>) => instanceof Element Unlike single tag (tag()) always receives content (tag()()) in a second pair of braces.

div('.container[data-sr="move 24px"]')().render(console.log) // <div class="container" data-sr="move 24px"></div>
div('.container[data-sr="move 24px"]')('content').render(console.log) // <div class="container" data-sr="move 24px">content</div>
Templates.tags

Contains: br hr img input base frame link meta html body h1 h2 h3 h4 h5 h6 hgroup div p address blockquote pre ul ol li dl dt dd fieldset legend form noscript object table thead tbody tfoot tr td th col colgroup caption span b big strong i var cite em q del s strike tt code kbd samp small sub sup dfn bdo abbr acronym a button textarea select option article aside figcaption figure footer header section main nav menu audio video embed canvas output details summary mark meter progress template comment

Templates.single + Templates.double

Templates.doctypes

Contains: html xml transitional strict frameset basic mobile

doctypes.html().render(console.log); // <!DOCTYPE html>

Support elements

Templates.content

Content management without the tag.

String

content('one', 'two').render(console.log) // 'onetwo'

Usage

Get a tag from them direct.

var div = Templates.tags.div;
var img = Templates.single.img;

Or using with. with (Templates.tags) { br() }


### Content
The method allows to insert content into manageable stream rendering.

#### String
```javascript
div()('one', 'two').render(console.log) // <div>onetwo</div>

Other Element

div()(br(), img(), span()('text')).render(console.log) // <div><br/><img/><span>text<span></div>

Queue

var queue = new require('Queues').Queue();
queue.add('queue');
p()(queue).render(console.log) // 'queue'

Sync Callback

var staticDb = { text: '1' };
var post = article('.post')(function(){ return staticDb.text; })
post.render(console.log) // <article class="post">1</article>
var staticDb = { text: '2' };
post.render(console.log) // <article class="post">2</article>

Async Callback

Asynchronously allows you to access the data.

// in db `some thing` == `data`
section('.container')(function(callback){
    db.search('some thing', function(error, result) { callback(error, result); });
}).render(console.log) // <section class="container">data</section>
div()('string').render(console.log) // 'string'

You can combine them.

var queue = new require('Queues').Queue();
queue.add('queue');

div()(
    'string',
    br(),
    queue,
    function() { return 'sync' },
    function(callback) { callback('async'); }
).render(console.log) // <div>string<br/>queuesyncasync</div>

Changing on the fly

var tags = div('.class')()
tags.render(console.log) // <div class="class"></div>

tags.attr('#Id.container')
tags.render(console.log) // <div class="class container" id="Id"></div>

tags.content('content', div()())
tags.render(console.log) // <div class="class container" id="Id">content<div></div></div>

tags.before('before')
tags.render(console.log) // <div class="class container" id="Id">beforecontent<div></div></div>

tags.after('after')
tags.render(console.log) // <div class="class container" id="Id">beforecontent<div></div>after</div>

tags.attributes.id = 'else';
tags.render(console.log) // <div class="class container" id="else">beforecontent<div></div>after</div>

tags.each(function(content, indexes) { // (content: selector:string|Prototype|Queues.Queue|Queues.ISyncCallback|Queues.IAsyncCallback, indexes: number[])
    // indexes == [0,0] // content: string = "before"
    // indexes == [1,0] // content: string = "content"
    // indexes == [1,1] // content: Queues.IAsyncCallback // rendering div
    // indexes == [0,1] // content: string = "after"
    if (content == 'after') return 'each';
});
tags.render(console.log) // <div class="class container" id="else">before<div></div>each</div>

tags.set([1,0], function() { return 'set' });
tags.render(console.log) // <div class="class container" id="else">beforeset<div></div>each</div>

tags.name = 'span';
tags.render(console.log) // <span class="class container" id="else">beforeset<div></div>each</span>

Extend and inherit

Extend one tag with attributes

var myTag = div('.myClass')('content').extend();
myTag()().render(console.log); // <div class="myClass"></div>

Inherit one tag with attributes and content

var myTag = div('.myClass')('content').inherit();
myTag()().render(console.log); // <div class="myClass">content</div>

Overriding the constructor in extend

var myTag = div()().extend(function(parent) {
    this.constructor = function() {
        parent.constructor.apply(this, arguments);
        // arguments == this.arguments == ['.fly'];

        this.content(span()(arguments[0]));
    };
})
myTag('.fly')(' and die').render(console.log) // <div class="fly"><span>.fly and die</span></div>
Alternative arguments
var myTag = div()().extend(function(parent) {
    this.constructor = function() {
        parent.constructor.apply(this);

        this.content(span()(arguments[0]));
    };
})
myTag('.fly')(' and die').render(console.log) // <div><span>.fly and die</span></div>

Latest Stable Release

Versions

0.3.0

Types

API

Node.js:

var T = require('oswst');

Require.js:

define(['oswst'], function(T) {});

window:

var T = window.oswst(_, async);
Clone this wiki locally