I need to pass decimal (floating point) values to Javascript in my Django template. The data is passed as data- elements, e.g.
{% for face in photo.face_set.all %}
<span class="face-text" style="margin-left: 1em;"
data-roi='{ "x":{{ face.x }}, "y":{{ face.y }}, "w":{{ face.w }}, "h":{{ face.h }} }'>
{{ face.person.display_as }}<br>
</span>
{% endfor %}
The obvious problem with this is that for locales with commas as a decimal separator, {{face.(x,y,w,h)}} are rendered e.g. as 1,234, while data values should be given with a decimal point.
I know that safe and unlocalize can be used to prevent this behaviour, but it doesn't seem right: my code should probably somehow make distinction between displayed and code values, without explicitly formatting each individual value. What is the best practice to do this?
I would get all the "value" part of the data formatted in python, converted to JSON and passed to the template. I would then use javascript to get back the data and populate your HTML template.
Related
I would like to know how to change this vue-multiselect example shown at this link (https://vue-multiselect.js.org/#sub-tagging), so that the array shown underneath only shows a list of names separated by commas. You can see in the image, I have selected Javascript and Open Source...and beneath it shows the entire object for both. I want to only show the 2 names separated by commas. Any help would be appreciated...
Can I make a simple change (hopefully) to this {{ value }} call below to accomplish this? Changing to {{ Value.name }}, etc does not work.
<div>
<label class="typo__label">Tagging</label>
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" #tag="addTag"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
One way is to convert it using javascript in the binding:
<pre class="language-json"><code>{{ value.map(v => v.name).join(', ') }}</code></pre>
How can I replace "#panel-element-964921" to "#panel-element-${stateOne}" while having the value of "${stateOne}" to show up using Thymeleaf?
<div class="panel-heading">
<a class="panel-title" data-toggle="collapse"
data-parent="#panel-790692" href="#panel-element-964921" th:text="${stateOne}">State
Name</a>
</div>
Here it is th:href="|#panel-element-${stateOne}|"
To concatenate plain strings with server-side model attributes one of the easier approaches is to use the || symbol wherein we write the complete string with server-side variables embedded within ${varibale}. This is a common string template feature supported in quite a few programming languages (sadly not in Java)
Then any attributes to be processed by Thymeleaf need to be prepended by th:.
I have texts in different screens of my template that correspond to headers, links, etc. and that I need them to appear translated in my web page.
How can I enter words, text strings, etc. and put the translation in all the languages of my site from the admin?
Thank you.
in twig template you can translate value by this way :
{{ "Most Recent"|t }}
another example :
<a class="button" href="#">{{ "Show most recent item"|t }}</a>
more documentation here :
https://www.drupal.org/docs/8/api/translation-api/overview
I'm trying to render a Block's Field as Plain Text as I need it used as part of HTML, I've tried using |RAW however I read it was unstable + it didn't work haha!
This is my existing HTML minified
Read More
However I would like to make it more useable
Read More
This would mean that when a user modifies the DrupalBlock HEX code it would change the color of the box. However the issues is when it's printed on the page it's looking like this
<div data-quickedit-field-id="#" class="field field--name-field-color field--type-string field--label-hidden field--item quickedit-field">FFFFFF</div>
the only thing I would like printed is "FFFFFF" with no div's
-
Here is my question: How do I display my Field_color as plain text when it prints?
You can use |raw : {{ content.field_color|raw }}.
If you need more information please ask.
I suggest you do a dump or kint of your content.field_color variable. You might be able to get some more information on it and get the answer!
Anyway, we have something similar in our project and the way we do it is by using a .getString() method.
{% set image_align = content.field_image_align['#items'][0].getString() %}
<div class="{{ image_align }}">
Our field is a list of values so you'll have to look for another array item to call the .getString() method on.
I was just wondering how you use the underscore templates in a .aspx view since the <%= %> tags that underscore uses get picked up by the .aspx rendering engine and give me errors.
For instance:
<script type="text/template" id="my-template">
<span class="event" title="<%= description %>">
<%= title %>
</span>
</script>
This template gives me an error since the .aspx rendering engine thinks I'm trying to bind this stuff to the Model.
Thanks.
From the fine manual:
template _.template(templateString, [data], [settings])
[...]
If ERB-style delimiters aren't your cup of tea, you can change Underscore's template settings to use different symbols to set off interpolated code. Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string.
So if the default <%=...%>, <%-...%>, and <%...%> delimiters aren't working for you then you can use different ones with a simple configuration change. For example, if you wanted to use {%...%} instead of <%...%>, then do this after underscore.js is loaded and before you use _.template:
_.templateSettings = {
interpolate: /\{%=(.+?)%\}/g,
escape: /\{%-(.+?)%\}/g,
evaluate: /\{%(.+?)%\}/g
};
Demo: http://jsfiddle.net/ambiguous/TfB5M/