Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Markout (gallery-markout) on cdn

Last Updated: 06/14/11

+ 10 -

Eric Ferraiuolo

YUI Developer

See 9 more by this user.

Created: 03/23/10
Last CDN Push: 02/2/11
Build Tag: gallery-2011.02.02-21-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.0 PR1
Free for use.

We built this API to provide a better means of creating HTML in JavaScript. We found ourselves always with some template of HTML we wanted to render data to, Markout provides a convenient API to do this.

MarkoutJS Homepage

Markout uses a chaining-style API of hierarchical writers (or appenders) with conveniently named methods that match those found in HTML4 and XHTML. Writers/Appenders are just like any other JavaScript object and can be passed as arguments to methods; allowing for code organization of your templates.

Tags:
ericf

Markout's constructor is also a factory:
Y.Markout() and new Y.Markout() are equivalent; they give a Writer/Appender for a DocumentFragment which you can start appending to.

var docFrag = Y.Markout();
docFrag.p().text('foo');

You Can call getDOMNode() or node() on any Writer/Appender to get the HTMLElement or Y.Node respectively.

Y.one('body').append(docFrag.getNode()); // will append your <p>foo</p> to the body.

Markout's constructor/factory can also take, an HTMLElement, Y.Node, or selector String in the constructor. The above example could be written as:

Y.Markout(document.body).p().text('foo'); // or
Y.Markout(Y.one('body')).p().text('foo'); // or
Y.Markout('body').p('foo');

All the HTML element methods can be changed, the following methods will stop the chain:
getDOMNode(), node(), text(), space().

Code Sample

<script src="http://yui.yahooapis.com/3.4.0 PR1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.02-21-07'
}).use('gallery-markout', function(Y) {
 
    var content = Y.Markout('#content'), ul;
 
    content.p({ id: 'markout' }).a({ href: 'http://oddnut.com/markout/' }, 'MarkoutJS');
 
    ul = content.ul({ 'class': 'people' });
    ul.li().em('Eric Ferraiuolo');
    ul.li().em('David Fogel');
 
});

Forum Posts

Subject	Author	Date
Really nice tool	Levan	04/12/10
Re: Really nice tool	Eric Ferraiuolo	04/13/10
how to add html entities	Levan	06/17/10
Re: how to add html entities	Eric Ferraiuolo	06/17/10