Quick start

Installation

Just attach script of flex-patterns to your page. That’s all.

<script type="text/javascript" src="expatterns.min.js"></script>

Included into HTML

Create template as simple HTML file. Attach necessary JS and CSS files.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <div class="page">
        <div class="page-container">
            <div class="page-wrapper">
                <div class="page-content-wrapper">{{ content }}</div>
            </div>
        </div>
    </div>
</body>
</html>

Places, where some content will be inserted you have to mark as {{ name }}. It’s named – hook.

Add in your page (parent page) link to pattern.

<link rel="pattern" name="layout" src="/html/page/template.html" data-hooks="content" />

Read more here about LINKs in flex.patterns.

Now you can use your pattern just as tag LAYOUT (according attribute NAME in LINK).

<layout>
    <p>Something on my page</p>
    <p>Something on my page</p>
    <p>Something on my page</p>
    <p>Something on my page</p>
    <p>Something on my page</p>
</layout>

If your pattern has more than 1 hook, for example like in next example: content and footer (2 hooks).

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <div class="page">
        <div class="page-container">
            <div class="page-wrapper">
                <div class="page-content-wrapper">
                    {{ content }}
                </div>
                <div class="page-footer-wrapper">
                    {{ footer }}
                </div>
            </div>
        </div>
    </div>
</body>
</html>

In this case you should define a value of each hook on page, where such pattern is used:

<layout>
    <content>
        <p>Something in content area</p>
        <p>Something in content area</p>
        <p>Something in content area</p>
    </content>
    <footer>
        <p>Something in footer</p>
        <p>Something in footer</p>
        <p>Something in footer</p>
    </footer>
</layout>

And LINK will be next for this example:

<link rel="pattern" name="layout" src="/html/page/template.html" data-hooks="content, footer" />

As you see, attribute data-hooks has to have list of all used hooks. Read more here about LINKs in flex.patterns.

Also you can use external source of data. For example, you can render a table using as data source some url (where data can be gotten). Pattern will be next:

<pattern data-pattern="/components/table.simple/component.html" data-hooks-src="/examples/json/table.all.json" style="display:none;"></pattern>

As you noticed, attribute data-hooks-src has url to external data.

JavaScript call

The other way to include template into layout – call render method of flex.patterns:

"use strict";
var rows = [];
for (var i = 0; i < 100; i += 1) {
    rows.push({
        column_0: (Math.random() * 1000).toFixed(4),
        column_1: (Math.random() * 1000).toFixed(4),
        column_2: (Math.random() * 1000).toFixed(4),
        column_3: (Math.random() * 1000).toFixed(4),
    });
}
_patterns.get({
    url: '/patterns/table/container/pattern.html',
    node: document.body,
    hooks: {
        titles: {
            column_0: 'Column #0',
            column_1: 'Column #1',
            column_2: 'Column #2',
            column_3: 'Column #3',
        },
        rows: _patterns.get({
            url     : '/patterns/table/row/pattern.html',
            hooks   : rows,
        })
    }
}).render();

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Flex.Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="pattern.css" />
</head>
<body>
    <table data-type="Demo.Table">
        <tr>
            <th>{{ titles.column_0 }}</th>
            <th>{{ titles.column_1 }}</th>
            <th>{{ titles.column_2 }}</th>
            <th>{{ titles.column_3 }}</th>
        </tr>
        {{ rows }}
    </table>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Flex.Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
    <tr>
        <td>{{ column_0 }}</td>
        <td>{{ column_1 }}</td>
        <td>{{ column_2 }}</td>
        <td>{{ column_3 }}</td>
    </tr>
</body>
</html>

Or you can create only one template of table (include template of row) and mark in your basic template repeated element as {{ [rows] }}. Like this:

<table data-type="Demo.Table">
	<tr>
		<th>{{ titles.column_0 }}</th>
		<th>{{ titles.column_1 }}</th>
		<th>{{ titles.column_2 }}</th>
		<th>{{ titles.column_3 }}</th>
	</tr>
	<tr {{ [rows] }}>
		<td>{{ column_0 }}</td>
		<td>{{ column_1 }}</td>
		<td>{{ column_2 }}</td>
		<td>{{ column_3 }}</td>
	</tr>
</table>

In this case will be enough to call your pattern with next:

var data_source = [];
for (var i = 0; i < 100; i += 1) {
    data_source.push({
        column_0: (Math.random() * 1000).toFixed(4),
        column_1: (Math.random() * 1000).toFixed(4),
        column_2: (Math.random() * 1000).toFixed(4),
        column_3: (Math.random() * 1000).toFixed(4),
    });
}
_patterns.get({
    url     : '/patterns/table/single/pattern.html',
    node    : document.body,
    hooks   : {
        titles: {
            column_0: 'Column #0',
            column_1: 'Column #1',
            column_2: 'Column #2',
            column_3: 'Column #3',
        },
        rows: data_source
    }
}).render();