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.
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.
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
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' }
[...]
}
UPDATE:
Let me rephrase.
I have multiple divs that all contain, among other things, an img element with the class="yes". But they're not all the same siblings.
Two examples:
<div id="div1" onclick="function(this)">
<img src="image1" />
<div>
<img src="image2" class="yes" />
</div>
</div>
<div id="div2" onclick="function(this)">
<img src="image3" class="yes" />
</div>
Now I'm trying to formulate one function for both divs that would change the source of the image with class yes.
getElementsByTagName doesn't seem to do the trick, nor does getElementsbyClassName.
Any thoughts? Thanks again!
getElementsByTagname is the wrong function.
There is no easy way to do what you're trying to do, unless you resort to third party libraries such as jQuery.
With jquery, you use this code:
$('img.yes').each(function() {
console.log(this);
});
Here is a working example of what you're trying to do: http://jsfiddle.net/ZYBp6/
You can use jQuery like this:
function some_function(x)
{
var arr = $("#" + x.id + " .yes"); // Gets all children of the class "yes"
}
Or if you only want to get img elements, you can do this instead:
function some_function(x)
{
var arr = $("#" + x.id + "img.yes");
}
In both of these examples, arr would contain DOM elements, and not the kind of "element" produced by jQuery normally.
This seems to work:
function function(x) {
$(x).find('.yes').attr('src','differentimage.png');
}