Mojolicious template helper

I would like to explain the helper that is useful in templates. Think of a helper as a function that you can call in a template. The layout helper and stash helper have already been explained, so I will explain the other helpers.

Embedding stylesheets

If you want to write a stylesheet in the template, use the stylesheet tag helper. Write the style sheet in the part surrounded by begin and end .

%= stylesheet begin
  body {
    background: blue;
  }
%end

You can write it using the style tag in the usual way, but this is more concise and convenient because it expands to a versatile tag. It will be expanded to the following tags.

<style> / * <! [CDATA [* /

  body {
    background: blue;
  }

/ *]]> * / </style>

You can also load stylesheets in public directories with the stylesheet tag helper.

%= stylesheet'/css/common.css';

It expands as follows:

<link href = "/ css / common.css" rel = "stylesheet" />

Helpers that can insert tags are called tag helpers. See Mojolicious Tag Helpers List for available tag helpers.

JavaScript embedding

If you want to write JavaScript in the template, use the stylesheet helper. Write JavaScript in the part surrounded by begin and end .

%= javascript begin
  alert ('Hello');
%end

You can write it using the script tag in the usual way, but this is more concise and convenient because it expands to a versatile tag. It will be expanded to the following tags.

<script> // <! [CDATA [

  alert ('Hello');

//]]> </script>

You can also load JavaScript in the public directory with the javascript helper.

%= javascript'/js/common.js';

It expands as follows:

<script src = "/ js / common.js"> </script>

Get application object

Use the app helper to get the application object.

%my $app = app;

Get controller object

You can refer to the controller object by the name $self in the template.

%my $c = $self

You can use this to get HTTP methods in the template, etc.

%my $http_method = $self->req->method;

Data dump

There is a dumper method for dumping the contents of the data. This is functionally the same as the Dumper function in the Data::Dumper module.

%warn dumper $date;

Import other templates

You can use the include helper to include other templates.

%= include'/include/header.html.ep

Headers and footers are often common to all sites, so it is convenient to create them and load them from multiple templates. include You can set the stash value by using the second and subsequent arguments of the helper.

%= include'/include/header.html.ep, name =>'kimoto', age => 34;

URL representation

When expressing the internal URL of an application in Mojolicious, be sure to use the url_for helper except for applications where performance is important. For example, if you want to express the URL "/ date / 20131215", write as follows.

<a href="<%=url_for('/date/20131215')%>"> 2013/12/15</a>

The url_for method is used to make the application versatile. If you write it like this, the URL will be generic regardless of whether you start it as CGI or as a server.

It expands as follows:

# For CGI
<a href="/myapp.cgi/date/20131215"> 2013/12/15</a>

#When started as a server
<a href="/date/20131215"> 2013/12/15</a>

Mojo::URL object

The url_for helper gets the Mojo::URL object. The Mojo::URL class is a class for handling URLs.

To stringify a Mojo::URL object, use the to_strong method or evaluate it as a string.

%my $url_str = url_for->to_string;
%my $url_str = "". url_for;

In the first example, "<%=%>" is simply evaluated as a string.

<%= url_for ('/ some')%>

Just write, and the URL will be expanded as a string.

Get the current URL

If you don't specify any arguments with the url_for helper, you can get the current URL.

%my $current_url = url_for

Query string

One thing to keep in mind with the url_for helper is that if you want to get the current URL with no arguments, you can get the URL of the part excluding the query string. If you want to get the URL including the query string, use the url_with helper.

<%= url_with%>

For example, if you access the URL "/ some? Name = kimoto & age = 30", the url_for helper will get "/ some", but the url_with helper will get "/ some? Name = kimoto & age = 30".

The query part is stored in the Mojo::Parameters object. This can be obtained with the query method of the Mojo::URL class.

my $query = url_with->query;

The query method also has the ability to set the query string. There are three ways to set the query string: Suppose the first query string was "title = perl & name = ken".

Replace query string

To replace the query string, pass it in list format as follows:

$url->query(name =>'taro', price => 1900);

In the case of the above example, it is replaced as follows.

# Previous
title = perl & name = ken

# After
name = taro & price = 1900

Merge query strings

To merge the query strings, pass it as an array reference.

$url->query([name =>'taro', price => 1900]);

It will be merged as follows: Those with the same value will be replaced.

# Previous
title = perl & name = ken

# After
title = perl & name = taro & price = 1900

Add query string

Pass it as a hash reference to add the query string.

$url->query({name =>'taro', price => 1900});

It will be added as follows.

# Previous
title = perl & name = ken

# After
title = perl & name = ken & name = taro & price = 1900

I think there is a strong demand for replacing only page numbers in web applications. In that case, it's a good idea to use the query merge feature.

<%= url_with->query([page => $page])%>

Sample using template helper

Let's write a sample code using the template helper explained this time.

use Mojolicious::Lite;

get'/ person' => sub {
  my $self = shift;
  
  #Parameter
  my $name = $self->param('name');
  my $age = $self->param('age');
  
  #Drawing
  $self->render('index', name => $name, age => $age);
};;

app->start;

__DATA__

@@index.html.ep
<%
  #Stash value
  my $name = stash ('name');
  my $age = stash ('age');
  
  #Get log
  app->log->info('Template Helper');
  
  #HTTP method
  my $http_method = $self->req->method;
  
  #Data dump
  my $data = [1, 2, 3];
  warn dumper $data;
%>
<html>
  <head>
    <title> Template Helper </title>>
    %= stylesheet'/css/common.css';
    %= javascript'/js/common.js';
  </head>
  <body>
    %= include'/ include / header';
    
    Name: <%= $name%> <br>
    Age: <%= $age%> <br>
    Current URL: <%= url_with%> <br>
    Current URL with some change: <%= url_with->query([name =>'ken'])%>
    %= include'/ include / footer';
  </body>
</html>

public / css / common.css

Place your CSS file in the "public" directory. Save it as "public / css / common.css". Settings such as changing the font color are written.

# header h1 {
  color: green;
  border-bottom: 1px solid gray;
}

#footer {
  color: red;
  border-top: 1px solid gray;
  text-align: center;
}

public / js / common.js

Place your JavaScript files in the "public" directory. Please put it in the position of "public / js / common.js". JavaScript that executes a dialog that displays "Hello".

alert ('Hello');

Header and footer

Let's make a header and footer. Save it as "templates / include / header.html.ep" and "templates / include / footer.html.ep" in the "templates" directory.

templates / include / header.html.ep

<div id = "header">
<h1> Template Helper </h1>
</div>

templates / include / footer.html.ep

<div id = "footer">
Author kimoto
</div>

Run application

Run this application and try accessing it with "/ person? Name = kimoto & age = 32". The header and footer are inserted at the top. The following is displayed as the content.

Name: kimoto
Age: 32
HTTP Method: GET
Current URL: / person? name=kimoto&age=32
Current URL with some change: / person? age = 32 & name = ken

Mojolicious Tutorial