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
Related
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>
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.
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' }
[...]
}
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.
Background:
Im working on a framework that has browser classes applied to the HTML element.
Im trying to apply a cross browser fix (for safari5) whenever I extend to a mixin.
Example Markup:
<html class="safari5">
<div class="child"></div>
</html>
LESS:
.mixin{
content:"cool style mixin that breaks on safari";
}
.safari5{
.fix{content:"hacks safari5's bullshit and semi-fixes cool style mixin"!important;}
}
.child{
&:extend(.mixin);
&:extend(.fix);
}
/*
Expected CSS Output:
.mixin,
.child {
content: "cool style that breaks on safari";
}
.safari5 .fix,
.safari5 .child{
content:"hacks safari5's bullshit and semi-fixes cool style mixin"!important;
}
*/
Thanks!
See extend all. E.g.:
.mixin {
1: 1;
}
.safari5 {
.fix {2: 2}
}
.child {
&:extend(.mixin, .fix all);
}