Skip to content

0.2.1

Jump to bottom
Ivan S Glazunov edited this page Feb 20, 2015 · 3 revisions

OSWS Templates 0.2.1

Why?

  • Only JavaScript is required!
  • Reconfigurable at any time.
  • Allows you to work with asynchronous data.
  • Inheritance simplicity.

How?

Install

NPM

npm install osws-templates --save

Theory

about doubles
about singles
about doctypes
about content
about attributes
about classes and id
about comments
about conditions

Usage

Get elements

var content = Templates.content; // Container elements.
var doctype = Templates.doctypes; // Some popular doctypes.
var html = Templates.doubles.html, body = Templates.doubles.body, head = Templates.doubles.head, div = Templates.doubles.div, menu = Templates.doubles.menu, li = Templates.doubles.li;
var img = Templates.singles.img, br = Templates.singles.br;

As usual template engine

content(
	doctype.html,
	html()(
		head,
		body()(
			menu()(
				li()('Home'),
				li()('News'),
				li()('Contacts')
			)
		)
	)
).render(console.log);
<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<menu>
			<li>Home</li>
			<li>News</li>
			<li>Contacts</li>
		</menu>
	</body>
</html>

Extending tags

_name, _attributes and _context inheritance
var myTag = div('.myTag')('my tag content').extend();
content(
	myTag,
	myTag('.container'),
	myTag('.data')('other content')
).render(console.log);
<div class="myTag">my tag content</div>
<div class="myTag container">my tag content</div>
<div class="myTag data">other content</div>
constructor and return replacement

Constructor works at the moment to create a new tag. Parent obtained on the first line - a reference to the latest expansion.

Returner determines that the assembly will return the item. For example, singles tags return an instance of itself, and dubls tags vovzarschayut method content.

var myTag = div('.myTag')().extend(function(parent) {
	this.constructor = function(counter) {

		// Handle arguments as the default method.
		// parent.constructor.apply(this, arguments);
		// So it is impossible! - this._parent.constructor.apply(this, arguments);
		// You can not pass arguments to the constructor of the parent and to treat them yourself.

		parent.constructor.apply(this/*, arguments */);

		// arguments == [5];
		for (var i = 0; i < counter; i++) {
			this.append(div()());
		}
	};

	// Instead of the .content, return an instance of the tag, it will ban a simple redefinition of the content and second brackets.
	this.return = function() {
		return this;
	};
});

myTag(5).render(console.log)
<div class="myTag">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

String templating

Add more templating!

The method used Templates._stringTemplate templating. You can override it.

The execution context is passed the following arguments to the method .render and in ._context.

var myTag = div('.myTag')('<%= hello %>').extend(function(parent) {
	this.constructor = function(counter) {
		parent.constructor.apply(this);
		for (var i = 0; i < counter; i++) {
			this.append(div()('<%= key %>: <%= value['+i+'] %>'));
		}
	};

	// Instead of the .content, return an instance of the tag, it will ban a simple redefinition of the content and second brackets.
	this.return = function() {
		return this;
	};
});

myTag(5).render(console.log, {
	hello: 'Hello World!',
	key: 'Div with content',
	value: ['one', 'two', 'three', 'four', 'five']
})
<div class="myTag">
	Hello World!
	<div>Div with content: one</div>
	<div>Div with content: two</div>
	<div>Div with content: three</div>
	<div>Div with content: four</div>
	<div>Div with content: five</div>
</div>

What?

Types and Interfaces

Elements

Other methods and variables

Changes

  • Fix TData stringify logic.
  • Support for multi-layered for IContext.
  • Support of overriding method Templates._stringTemplate.
  • Implementation in the plural.
  • Remove multi content arrays system => One element = one content array.
  • Added syntax reduction in contains elements.

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