How to render HTML with golang data in golang gin web frame? - html

I am trying to place a golang array (also slice, struct, etc.) to HTML so I can use array element in HTML Element content when returning HTML from golang gin web framework. Another problem is how to render these data with loop? Such as Flask jinja
works in this way.
{% block body %}
<ul>
{% for user in users %}
<li>{{ user.username }}</li>
{% endfor %}
</ul>

Usually you have a folder with template files so first you need to tell the gin where these templates are located:
router := gin.Default()
router.LoadHTMLGlob("templates/*")
Then in handler function you simply pass template name the data to HTML function like this:
func (s *Server) renderIndex(c *gin.Context) {
c.HTML(http.StatusOK, "index.tmpl", []string{"a", "b", "c"})
}
In index.tmpl you can the loop the data like this:
{{range .}}
{{.}}
{{end}}
The . is always the current context so in first line . is the input data and inside the range loop . is the current element.
Template example: https://play.golang.org/p/4_IPwD3Y84D
Documentation about templating: https://golang.org/pkg/text/template/
Great examples: https://astaxie.gitbooks.io/build-web-application-with-golang/en/07.4.html

Related

html file cannot work if {{ end }} is added

I am using golang to add contents to the html template files. The main file is simple
func main() {
server := http.Server{
Addr: "localhost:8080",
}
http.HandleFunc("/process", processCover)
server.ListenAndServe()
}
func processCover(w http.ResponseWriter, r *http.Request) {
t1, _ := template.ParseFiles("t1.html", "t2.html")
t1.Execute(w, "hello World")
}
In the html file, if I add the following code
<!-- {{ range . }}
<li>{{ . }}</li>
{{ end }} -->
The items after it are all missing. I don't get it because I think this is commented. It should be some bullet point I don't know about go web.
HTML comments in templates are not rendered if the context of the output is HTML. Since you put your {{range}} in HTML comment (between <!-- and -->) and since the output is an HTML document, it is stripped.
This is hinted in the doc of Template.Parse():
A template definition with a body containing only white space and comments is considered empty and will not replace an existing template's body.
See related: Go - HTML comments are not rendered

How to integrate jinja module inside PyGears

I created jinja module as example, which looks like this
{% from 'snippet.j2' import module with context %}
{% call module() %}
logic [$size(din.data)-1 : 0] res;
assign res = din.data * din.data;
{% if params['half'] %}
assign dout.data = res / 2;
{% else %}
assign dout.data = res;
{% endif %}
assign din.ready = dout.ready;
assign dout.valid = din.valid;
{% endcall %}
How should I use this module inside PyGears?
Okay, I think this should work.
If I understood correctly you are trying to create a Jinja template for a module that will multiply with 1/2 (in other words divide by two). First of all, make sure your Jinja file and module are named the same (this is a must so PyGears would know which Jinja template to use).
Having all this in mind let's say our module name is mulh
Python file would be something like this:
from pygears import gear, Intf, reg
from pygears.typing import Uint
from pygears.hdl import hdlgen
#gear
def mulh(din: Uint,*,half=False)->b'din*din':
    pass
mulh(Intf(Uint[8]))
hdlgen('/mulh', outdir='.')
This code will call your Jinja file and the HDL output would look like something like this:
module mulh
(
    input logic clk,
    input logic rst,
    dti.consumer din, // u8 (8)
    dti.producer dout // u16 (16)
);
    typedef logic [7:0] din_t; // u8
    typedef logic [15:0] dout_t; // u16
    din_t din_s;
    dout_t dout_s;
    assign din_s = din.data;
    assign dout.data = dout_s;
    logic [$size(din.data)-1 : 0] res;
    assign res          = din.data * din.data;
    assign dout.data    = res;
assign din.ready    = dout.ready;
    assign dout.valid   = din.valid;
endmodule
To make it easier to picture all of this I made this picture bellow

Mailjet: Array value provided through vars makes email being blocked on sending

I’m working on an email template for Mailjet written in MJML that uses an array value provided through Vars to generate a list of items the sender wants to receive from the mail recipient. All values in the array are plain text values.
The data passed to the API request looks like this:
{
"FromEmail":"sender#email.com",
"FromName":"Chris Crumble",
"Subject":"Data Request",
"MJ-TemplateID":"200000",
"MJ-TemplateLanguage":true,
"Recipients":[
{
"Email":"recipient#email.com",
"Name":"Hans Henson"
}
],
"Vars":{
"mailTitle":"Data Request",
"userName":"Chris Crumble",
"imageUrl":"http://my.host.com/image.jpg",
"userBirthDate":"1.3.1982",
"recipientName":"Hans Henson",
"uploadUrl":"https://my.upload.com/",
"authVideoUrl":"https://my.authvideo.com",
"records":["Document A","Document B"],
"authPhone":"113777840097"
}
}
The template uses var:records like this:
...
</mj-text>
<mj-raw> {% if var:records:false %} </mj-raw>
<mj-text>
<p>
I, <strong>{{var:userName}}, born on {{var:userBirthDate}}</strong> am asking you to provide the following documents:
</p>
</mj-text>
<mj-raw> {% for item in var:records %} </mj-raw>
<mj-text>
{{item}}
</mj-text>
<mj-raw> {% endfor %} </mj-raw>
<mj-raw> {% else %} </mj-raw>
<mj-text>
<p>
I, <strong>{{var:userName}}, born on {{var:userBirthDate}}</strong>, am asking you to provide all my existing documents.
</p>
</mj-text>
<mj-raw> {% endif %} </mj-raw>
<mj-text>
...
As long as var:records isn’t set in the data sent with the request, the mail is sent as expected. As soon as an (not empty) array value is provided with the request, the mail is blocked by Mailjet on sending without giving any further information on the reason.
No idea how to get this working.
UPDATE:
Thanks to Zhivko’s hint to the error reporting mechanism provided by Mailjet I was able to gain a little more insight into the problem.
The template produces the following error:
expression parsing error ## Unknown identifier: var:records:false ## near ## var:records:false ##
This still doesn’t make any sense to me as the line mentioned is an if condition with a default value of false defined for the case that no value for var:records is provided with the api request.
Also the template only produces this error when the value is explicitely set in Vars and is not empty.
My tests so far make me guess that it may have to do with the provided value being an array value as the line doesn’t cause any problems if the value is plain string.
I had the same problem and after asking the MJML team on their Slack I add an answer. Just use the defined() method :
Example :
{% if defined(var:employees) %}
My employees :
<ul>
{% for employee in var:employees %}
<li>{{employee.firstname}} {{employee.lastname}}</li>
{% endfor %}
</ul>
{% endif %}
This method is correct and a core maintainer of MJML just says :
It's not publicly documented yet
PS : Their Slack is a good place to ask this kind of question and I had a response in minutes. (mjml.slack.com)
The message is probably blocked due to an error in the template language. To receive details about the error, enable the error reporting mechanism. If you have troubles debugging the error message, open a support ticket with Mailjet for in depth investigation for the specific template.
As far as I know, Mailjet doesn't allow arrays as a personalized var.
DataType: the type of data that is being stored (this can be either a
str, int, float or bool)
https://dev.mailjet.com/guides/#manage-contacts
Solution:
<% if(typeof bar !== 'undefined') { %>
variable 'bar' is defined in payload:
<b><%= bar %></b>
<% } else {%>
variable 'bar' is not defined in payload
<% }%>

build an includable template as string [django]

I want to build a list of clickable links for my nav, and because these are links to my site, I want to use the url-tag. I get a list of dictonaries which knows all names for the links and create a template string with them with this function:
def get_includable_template(links):
output = '<ul>'
for link in links:
output = output + '<li><a href="{% url' + get_as_link(link) + '%}>" + link['shown'] + '</a></li>'
output = output + '</ul>
links looks like this:
links = [
{'app': 'app1', 'view': 'index', 'shown': 'click here to move to the index'},
{'app': 'app2', 'view': 'someview', 'shown': 'Click!'}
]
get_as_link(link) looks like this:
def get_as_link(link):
return "'" + link['app'] + ':' + link['view'] + "'"
The first method will return a template, which looks like this (but it's all in the same code line):
<ul>
<li>click here to move to the index</li>'
<li>Click!</li>
</ul>
I want this to be interpreted as template and included to another template.
But how to include this?
Let's say, my other template looks like this:
{% extends 'base.html' %}
{% block title %}App 1 | Home{% endblock %}
{% block nav %}INCLUDE THE TEMPLATE HERE{% endblock %}
{% block content %}...{% endblock %}
What I have already tried:
make the template string a variable - doesn't work, because it doesn't interpret template language in variables (I couldn't find a template tag similar to safe which not only interprets HTML code but also template code.
Building HTMl code in my methods (Isn't best-practice at all, because I needed to use absolute paths)
Is there a good solution about this?
You are making this more complicated than it needs to be.
Firstly, it seems that the only reason you need this to be interpreted as a template is so that it parses the url tag. But there is already a way of creating links in Python code, and that is the reverse() function. You should use that instead.
Secondly, the way to dynamically generate content for use inside a template is to use a custom template tag.

Include a twig file and pass variables from a separate file?

I have container.twig including component.twig and passing an object called 'mock'.
In container.twig:
{% set mock = {
title : "This is my title"
}
%}
{% include 'component.twig' with mock %}
This is working fine but I want to move the mock data to its own file. This isnt working:
Container.twig
{% include 'component.twig' with 'mock.twig' %}
In mock.twig
{% set mock = {
title : "This is my title"
}
%}
Im using gulp-twig but it works like standard twig in most respects. https://github.com/zimmen/gulp-twig
The problem
Twig context is never stored in the template object, so this will be very difficult to find a clean way to achieve this. For example, the following Twig code:
{% set test = 'Hello, world' %}
Will compile to:
<?php
class __TwigTemplate_20df0122e7c88760565e671dea7b7d68c33516f833acc39288f926e234b08380 extends Twig_Template
{
/* ... */
protected function doDisplay(array $context, array $blocks = array())
{
// line 1
$context["test"] = "Hello, world";
}
/* ... */
}
As you can see, the inherited context is not passed to the doDisplay method by reference, and is never stored in the object itself (like $this->context = $context). This deisgn allow templates to be reusable, and is memory-friendly.
Solution 1 : using global variables
I don't know if you are aware of Global Variables in Twig. You can do a bunch of hacks with them.
The easiest usage is to load all your globals inside your twig environment.
$loader = new Twig_Loader_Filesystem(__DIR__.'/view');
$env = new Twig_Environment($loader);
$env->addGlobal('foo', 'bar');
$env->addGlobal('Hello', 'world!');
Then, you can use {{ foo }} and {{ Hello }} in your whole application.
But there are 2 problems here:
As you're trying to load variables from twig files, I assume you have lots of variables to initialize depending on your feature and don't want to load everything all time.
you are loading variables from PHP scripts and not from Twig, and your question want to import variables from a twig file.
Solution 2 : using a Twig extension
You can also create a storage extension that provide a save function to persist some template's context somewhere, and a restore function to merge this stored context in another one.
proof_of_concept.php
<?php
require __DIR__.'/vendor/autoload.php';
class StorageTwigExtension extends Twig_Extension
{
protected $storage = [];
public function getFunctions() {
return [
new Twig_SimpleFunction('save', [$this, 'save'], ['needs_context' => true]),
new Twig_SimpleFunction('restore', [$this, 'restore'], ['needs_context' => true]),
];
}
public function save($context, $name) {
$this->storage = array_merge($this->storage, $context);
}
public function restore(&$context, $name) {
$context = array_merge($context, $this->storage);
}
public function getName() {
return 'storage';
}
}
/* usage example */
$loader = new Twig_Loader_Filesystem(__DIR__.'/view');
$env = new Twig_Environment($loader);
$env->addExtension(new StorageTwigExtension());
echo $env->render('test.twig'), PHP_EOL;
twig/variables.twig
{% set foo = 'bar' %}
{% set Hello = 'world!' %}
{{ save('test') }}
twig/test.twig
{% include 'variables.twig' %}
{{ restore('test') }}
{{ foo }}
Note: if you only want to import variables without actually rendering what's inside twig/variables.twig, you can also use:
{% set tmp = include('variables.twig') %}
{{ restore('test') }}
{{ foo }}
Final note
I'm not used to the JavaScript twig port, but it looks like you can still extend it, that's your go :)
Because of Twig's scoping rules (which I assume are replicated by the gulp version), you cannot pass variables up from a child template without creating a helper function. The closest thing you can do is to use inheritance to replicate this.
As such, your mock.twig file would become
{% set mock = {
title : "This is my title"
}
%}
{% block content %}{% endblock %}
Your container.twig would then become
{% extends 'mock.twig' %}
{% block content %}
{% include 'component.twig' with mock %}
{% endblock %}
This achieves your goals of separating the mock content from the templates for the most part and, using dynamic extends, you can do something like
{% extends usemock == 'true'
? 'contentdumper.twig'
: 'mock.twig' %}
with a contentdumper.twig file that is just a stub like so
{% block content %}{% endblock %}
and then set the usemock variable to determine if you will be using the mock data or not.
Hopefully this helps, even though it doesn't really solve the exact problem you are having.