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' },
          { '.' => 'EEE' },
      ],
  });
  
  __DATA__
  <ul>
      <li>sample</li>
      <li class="dummy">sample</li>
      <li class="dummy">sample</li>
      <li class="dummy">sample</li>
  </ul>

Output:

  <ul>
      <li>AAA</li>
      <li>BBB</li>
      <li>CCC</li>
      <li>DDD</li>
      <li>EEE</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>