json script with kotlinx.html - kotlin

building html page using kotlinx.html
lots of content built without problems, but stumbling on adding json script tag with an id so the code on the client can retrieve the json data.
what to have the code something like..
<script id="jsondata" type="application/json">
{ "jsondata": "is here" }
</script>
using kotlinx.html i can have
script(type="application/json"){
+"""{ "jsondata": "is here"}"""
}
but unlike other tags, script does not seem to have an id property. Any ideas on how to get set the id for the script tag?

All you need is Tag.attributes (mutable map with tag attributes).
script(type = "application/json") {
attributes["id"] = "jsondata"
unsafe { +"""{ "jsondata": "is here" }""" }
}
will give you this result:
<script type="application/json" id="jsondata">{ "jsondata": "is here" }</script>

Related

How to get raw html from a $refs?

I need to retrieve raw HTML from a component and then insert it into a textarea.
For that I wrapped my component in a DIV:
<div id="content" ref="content">
<Nl v-bind:json="json" />
</div>
When my json change I would like to get a raw html of the generated text based on my json:
watch: {
json: function (val) {
console.log(this.$refs.content);
console.log(this.$refs.content.innerHTML);
this.rawHtml = ???;
}
},
Here's what I get with my two console.log():
The innerHtml give me a html comment?! How can I get a raw html of this.$refs.content ?
You may have to wait the DOM being updated before reading it. You can use $nextTick.
watch: {
json(val) {
this.$nextTick().then(() => {
console.log(this.$refs.content);
console.log(this.$refs.content.innerHTML);
this.rawHtml = this.$refs.content.innerHTML;
});
}
},
Works fine for me.

Kotlin: Ktor how to respond text as html

I want to use library kotlin-html to produce html instead of kotlinx.html.
This library produces just a html-text:
p("A paragraph").render()
// => <p>A paragraph</p>
but I can't find how to respond html instead of text using Ktor
fun Routing.root() {
get("/") {
call.respondText {"<p>A paragraph</p>"}
}
}
This code will produce a page with text <p>A paragraph</p> instead of html-page. And it seems that call.respondHtml only works with kotlinx.html DSL. How can I do this using plain text?
You can specify ContentType.Text.Html for the ContentType parameter to respondText
call.respondText("<p>foo</p>", ContentType.Text.Html)
ContentType.Text.Plain is used by default if no ContentType if provided.
Ktor has a special module for working with kotlinx.html, so you can use
call.respondHtml {
head {
title { +"Async World" }
}
body {
h1(id = "title") {
+"Title"
}
}
}
See details here: https://ktor.io/servers/features/templates/html-dsl.html

How do I use the HTML attribute in i18n's TValueConverter with parameters?

In Aurelia's i18n it's possible to use HTML tags by this:
<span t="[html]title">Title</span>
But how do I use HTML tags when I need to use TValueConverter syntax like this one:
${'title' | t: {'some':'param'}}
I need to use that syntax because I have some parameters to pass here.
Is it even possible?
It is explained in the docs here.
// Translation file
{
"paramstest": "Some text with <strong>{{content}}</strong>"
}
// View
<span t="[html]paramstest" t-params.bind="params"></span>
// ViewModel
class MyVM {
params = { content: 'ABC' }
[...]
}

Rendering template strings in RiotJS

I have a template string "<a onclick={ parent.foo }>Link</a>". I want pass it to other tag and than render it correctly.
I added short example of my code. It doesn't work, just try to show what I need.
<child-tag>
<div>{ opts.data }</div>
</child-tag>
<parent-tag>
<child-tag data={ html }></child-tag>
<script>
this.html = "<a onclick={ parent.foo }>Link</a>";
foo() {
console.log("Hello");
}
</script>
</parent-tag>
Riot will escape the html where you have { opts.data }. You can use the <raw> tag as described in the riot documentation. But it may be best to rewrite the code as such.
https://jsfiddle.net/nnyc688e/1/
<child-tag>
<yield/>
</child-tag>
<parent-tag>
<child-tag> <a onclick={ parent.foo }>Link</a> </child-tag>
foo() {
console.log("Hello");
}
</parent-tag>
That's easier to understand too.

Iterating through array in SendGrid email template

I'm trying to iterate through a collection and display information in a SendGrid template using Ruby on Rails.
recipient = SendGrid::Recipient.new("sergio#gmail.com")
recipient.add_substitution("username", user.github_id)
recipient.add_substitution("numbers", [1,2,3,4])
In gmail, this template arrives as:
sergiotapia
ARRAY(0x85b9d90)
The actual code for the template, copied from SendGrid's editor:
<html>
<head>
<title></title>
</head>
<body>
<div><%body%></div>
<div>username</div>
<div>numbers</div>
<p>This is a small example email.</p>
</body>
</html>
How can I iterate through a generic array or object in a SendGrid template? For this particular example, a user has many posts and I just want to show the title of the user's posts in a <li> element.
I'm just trying things out with a simple number array to see how it SendGrid works.
Update August 2018:
Sendgrid now offers iterators from the transactional email using handlebars, here's to the docs for more info:
https://sendgrid.com/docs/for-developers/sending-email/using-handlebars/#basic-iterator
Iterate example for the data:
{
"people":[{"name":"Bob"},{"name":"Sally"}]
}
Code:
{{#if people}}
<p>People:</p>
{{#each people}}
<p>{{this.name}}</p>
{{/each}}
{{/if}}
Result:
People:
Bob
Sally
{{#each data.products}}
{{name}}: {{price}} <br/>
{{/each}}
{"data":{"products": [{"name": "Tomato", "price": "5"}, {"name": "Banana", "price": "8"}]}}
Update
SendGrid now has support for dynamic templates!
You can read about it on their blog:
https://sendgrid.com/blog/how-to-use-sendgrids-dynamic-templates-for-your-transactional-emails/
Old answer:
Searching for this resulted the following GitHub issue. So it's not possible with SendGrid (yet?).
However there are other ways to do this. Using sendwithus you get access to a more powerful template editor that supports looping and iterating.
Simply set it up using your own SendGrid API key and you will be able to use the arrays in the sendwithus template which will send the mail using SendGrid.
Unfortunately the templates SendGrid provides are pretty minimal at this time. The templates don't support arrays as values and there are no conditional or looping controls, so you'd need to predetermine everything prior to building the template and template content. A more robust templating system is coming soon.
Here is a workaround Sendgrid is yet to update their template engine for this
Hello guys i need to do some iteration in my sendgrid mail and ran into this issue for now i had a temporal workaround which solved the problem. here is how i worked around it
created a txt file and loaded my html template there
Note areas i wanted to iterate on i replaced with a sendgrid variable e.g %list of items%
read the txt file into a string create a string builder and pass all iterated object into the %list of items% variable
then send the whole string content as message through sendgrid
public void sendSimpleMessage(String message,
String subject,
String toEmail,
String fromEmail){
Email from = new Email(fromEmail);
Email to = new Email(toEmail);
Content content = new Content("text/html", message);
Mail mail = new Mail(from, subject, to, content);
SendGrid sg = new SendGrid(sendgridApiKey);
Request request = new Request();
try {
request.method = Method.POST;
request.endpoint = "mail/send";
request.body = mail.build();
sg.api(request);
} catch (IOException ex) {
ex.printStackTrace();
}
}
hope it helps someone
https://github.com/sendgrid/sendgrid-nodejs/issues/221#issuecomment-361489007
"businessContributors" : [
{
"total" : {
"amount" : 11340,
"title" : "Dhama Ji Total"
},
"list" : {
"Dhama Ji Paid" : -296310,
"HDFC Account" : 0,
"Dhama Ji Received" : 307650
},
"title" : "Dhama Ji Owner Account"
},
{
"total" : {
"amount" : -1270,
"title" : "Rahul Total"
},
"list" : {
"Rahul Paid" : 243838,
"Rahul Received" : 242568
},
"title" : "Rahul Account"
},
]
in email template :-
<h4>Business Contributors </h4>
<ul>
{{#each businessContributors}}
<li> {{this.title}} <br>
{{#each this.list}}
{{#key}} = {{this}} <br>
{{/each}} </li>
<hr style="height: 2px; background-color: black;"><br>
<h2>{{this.total.title}}</h2><br>
<h2>{{this.total.amount}}</h2>
<br><br>
{{/each}}
</ul>