I have an html template where i want to insert some JavaScript code from outside of template itself. In my template data struct i have created a string field JS string and call it with {{.JS}}. The problem is that everything in browser is escaped:
newlines are \n
< and > are \u003c and \u003e
" is \"
Same symbols inside of a template are fine. If I Print my JS field into console it is also fine. I have seen some similar problems solved by using template.HTML type instead of string. In my case it does not work at all.
EDIT 1
The actual context is
<script language="JavaScript">
var options = {
{{.JS}}
};
</script>
Either change the field's type to template.JS like so:
type Tmpl struct {
// ...
JS template.JS
}
Or declare a simple function that converts a string to the template.JS type like so:
func toJS(s string) template.JS {
return template.JS(s)
}
And then register the function with the Funcs method and use it in your template like so:
{{toJS .JS}}
Try setting the type of JS to template.JS:
import "html/template"
type x struct {
JS template.JS
}
Documentation can be found here.
Related
I want to update a custom property value inside a child component,
and also want to get event whenever the value is changed.
So, I tried both v-model: and #update:, like this.
<CustomName v-model:custom-name="name"
#update:custom-name="nameChanged"/>
// CustomName.vue
<script>
export default {
name: 'CustomName',
props: {
customName: String
},
emits: ['update:customName'],
setup(_, {emit}) {
const customNameChanged = (event) => {
emit('update:customName', event.target.value)
}
return {
customNameChanged
}
}
}
</script>
<template>
<input :value="customName" #change="customNameChanged"/>
</template>
I expected that name is changed and nameChanged is called,
but name is not changed.
I tried some cases at the vue sfc playground.
The result is,
(1) When I use camelCase, value is updated and method is called.
<CustomName v-model:customName="name4"
#update:customName="nameChanged"/>
(2) But when I use kebab-case, value is NOT changed and method is called.
<CustomName v-model:custom-name="name3"
#update:custom-name="nameChanged"/>
(3) Without #update:, camelCase and kebab-case are worked well.
<CustomName v-model:custom-name="name1"/>
<CustomName v-model:customName="name2"/>
Is this right? Is it illegal to use v-model with #update? Or should I use camelCase?
I have written a simple package in Go and I have compiled with gopherJS .
I have then included it my HTML via
<script src="./testgopher.js">
It has been loaded and all is well. But I am not sure how I can reuse a go function that has been declared in one of packages inside my own javascript.
What I want to do is in another script tag
<script> testpkg.Testfunc() </script>
where the testpkg and Testfunc have been written in go.
I tried to look into the window object and it doesnt look like the function has been added to window.
First you have to register your function if you want to call it from JavaScript. For that you may use the js.Global variable.
Let's see a simple Go function called Hello() which writes the "Hello World!" text into the main document:
import "github.com/gopherjs/gopherjs/js"
func Hello() {
js.Global.Get("document").Call("write", "Hello World!")
}
Then in your Go main() function you can register it like this:
func main() {
js.Global.Set("Hello", Hello)
}
After this registration, the "Hello" identifier will be available to you in JavaScript. Since we registered a Go function value (Hello) to this identifier, it will also be a function in JavaScript which you can simply call like this:
<script>
Hello();
</script>
I receive from my frontend a json with a string containing 1 or more HTML elements for example:
"textTop" : "<b>bold</b><div><i>italic</i>..."
I want to use this string to create Html elements inside a div, but I'm not really sure if I can do this with golang templates.
type FooBar struct {
TextTop string
}
So I'm currently storing the TextTop in a string, and then displaying it in html with:
<div>
{{.TextTop}}
</div>
But of course this produces the following result in the browser. just a div containing the string, I'm passing.:
So should I use a different type for TextTop inside Foobar struct instead of type string, which one? or can I use a golang function that reads all html elements from a string and renders them in the html as part of the DOM and not just a string?
To prevent escaping, declare the field as type template.HTML:
type FooBar struct {
TextTop template.HTML
}
See the linked documentation for information about the security risks of using template.HTML.
In a Laravel 5 blade template I have a <script> section.
In this section I need to set a variable to a string that is coming from another blade template.
I tried something like :
<script>
var a = "#include 'sometext.blade.php' ";
</script>
but this obviously doesn't work.
Also, the included blade can contain both single and double quotes, so these need to be escaped somehow, or the Javascript will not be valid.
Any ideas?
Ended up needing similar functionality when working with DataTables, and the additional actions HTML needs to be injected after the fact via jQuery.
First I created a helper function with this (from Pass a PHP string to a JavaScript variable (and escape newlines)):
function includeAsJsString($template)
{
$string = view($template);
return str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$string), "\0..\37'\\")));
}
Then in your template you could do something like:
$('div.datatable-toolbar').html("{!! includeAsJsString('sometext') !!}");
to include the sometext.blade.php blade template with escaping of quotes and removal of newlines.
i am trying to pull an html page into my javascript file, (essentaiily the webpage will consist of a JSON string) and then i would like to set that string to a js var for eval. i have tried the $.ajax method - currently to no avail.
jQuery.getJSON('my.json', function (obj) {
MyNS.Sub.doSomething(obj);
});