NAME
Template::Semantic::Cookbook - Template::Semantic Recipes, tricks, hints
RECIPES
Zebra tables
Use XPath power.
print Template::Semantic->process(\*DATA, {
'table tbody tr' => [
{ '//td[1]' => '101', '//td[2]' => '102' },
{ '//td[1]' => '201', '//td[2]' => '202' },
{ '//td[1]' => '301', '//td[2]' => '302' },
{ '//td[1]' => '401', '//td[2]' => '402' },
],
})->process({
'//table//tr[position() mod 2 = 0]/@class' => 'even',
});
__DATA__
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>sample</td>
<td>sample</td>
</tr>
</tbody>
</table>Output:
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>101</td>
<td>102</td>
</tr>
<tr class="even">
<td>201</td>
<td>202</td>
</tr>
<tr class="">
<td>301</td>
<td>302</td>
</tr>
<tr class="even">
<td>401</td>
<td>402</td>
</tr>
</tbody>
</table>If you don't like class="", do this.
print Template::Semantic->process(\*DATA, {
...
)->process({
'//table//tr[position() mod 2 = 0]/@class' => 'even',
'//table//tr[position() mod 2 = 1]/@class' => undef,
});For javascript
If you want to set the value for JavaScript...
print $ts->process(\*DATA, {
'script[src="foo.js"]@src' => 'http://prod-server/foo.js',
'//script[2]' => 'var = ' . JSON::to_json($var_to_js),
});
__DATA__
<html>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript"></script>
...
</html>Add attribute
The following example is output with NOT <div class="foo">foo</div> like <div>foo</div> because LibXML cannot find class attribute in <div>.
print Template::Semantic->process(\'<div>foo</div>', {
'div@class' => 'foo',
});You can add the attribute with the on-demand.
print Template::Semantic->process(\'<div>foo</div>', {
'div' => sub { shift->setAttribute(class => 'foo'); \$_ },
});But I think that you should prepare place holder.
print Template::Semantic->process(\'<div class="">foo</div>', {
'div@class' => 'foo',
});Dummy items
If template contains dummy items to check design, you may delete them first.
print Template::Semantic->process(\*DATA, {
'.dummy' => undef, # remove dummys first
})->process({
'ul li' => [
{ '.' => 'AAA' },
{ '.' => 'BBB' },
{ '.' => 'CCC' },
{ '.' => 'DDD' },
],
});
__DATA__
<ul>
<li>sample</li>
<li class="dummy">sample</li>
<li class="dummy">sample</li>
<li class="dummy">sample</li>
</ul>Indicator only for Temlate::Semantic
Idea 1 - Original data-id attribute:
print Template::Semantic->process(\*DATA, {
'//*[@data-id="foo"]' => 'foo',
'//*[@data-id="bar"]' => 'bar',
})->process({
'//@data-id' => undef,
});
__DATA__
<div>
<span data-id="foo">xxx</span>
<span data-id="bar">xxx</span>
</div>Idea 2 - Original x-foobar class:
print Template::Semantic->process(\*DATA, {
'.x-foo' => 'foo',
'.x-bar' => 'bar',
})->process({
'//span[contains(@class,"x-")]/@class' => sub {
join " ", grep { !/^x-/ } split /\s+/;
},
});
__DATA__
<div>
<span class="x-foo">xxx</span>
<span class="x-bar">xxx</span>
</div>Some custom filter ideas...
Output format config in template:
print Template::Semantic->process(\*DATA, {
'.date' => sub {
my $date = localtime; # or DateTime->now
$date->strftime( shift->getAttribute('data-format') );
},
})->process({
'//@data-format' => undef,
});
__DATA__
<div class="entry">
<div class="date" data-format="%Y/%m/%d">2010/99/99</div>
</div>Output:
<div class="entry">
<div class="date">2010/02/08</div>
</div>Include
It is easy to substitute another process().
my $ts = Template::Semantic->new;
print $ts->process(\*DATA, {
'#container' => $ts->process('included.html'),
});
__DATA__
<html>
<body>
<div>foo</div>
<div id="container"></div>
<div>bar</div>
</body>
</html>Do you want to include filename in the template?
my $ts = Template::Semantic->new;
print $ts->process(\*DATA, {
'#container' => sub { $ts->process($_) },
});
__DATA__
<html>
<body>
<div>foo</div>
<div id="container">included.html</div>
<div>bar</div>
</body>
</html>Wrapper
It is possible though is tricky.
my $ts = Template::Semantic->new;
print $ts->process('content.html', {
'/part' => sub {
my $node = shift;
# Get wrapper filename from attribute.
my $wrapper = $node->getAttribute('wrapper');
# Process wrapper.html,
# embed this innerHTML to wrapper.html's <div id="content">
my $out = $ts->process($wrapper, { '#content' => \$_ });
# Insert result(as XML::LibXML::Element) after me.
$node->addSibling($out->dom->documentElement);
# And delete me.
return undef;
}
})->process({
'h1' => 'Hello world!',
});content.html
<part wrapper="wrapper.html">
<h1>foo</h1>
<p>bla bla bla</p>
</part>wrapper.html
<html>
<body>
<div id="content">
</div>
</body>
</html>Output:
<html>
<body>
<div id="content">
<h1>Hello world!</h1>
<p>bla bla bla</p>
</div>
</body>
</html>Do you have another good usage?
Blog it ;)
AUTHOR
Naoki Tomita <tomita@cpan.org>