I created a lot of Thymeleaf templates during the last weeks, using both html5 and textual mode. In these templates I need to use a lot of th:each statements that iterate over the Context variables.
On these variables I ofter access their getters which in turn return other objects which I have to use getters on and so on.
In order to process the data returned I need to apply stuff like strings.defaultString(...)
All these combined statements make it difficult to read and comprehend what is going on. Many lines of my templates are so long that they can't be read without scrolling horizontally.
I searched for best practices but only found some that describe how to create "base templates" that give general advice on using Thymeleaf in combination with Spring or mention how to include common fragements.
Is there best practice how to format / wrap Thymeleaf statements without causing negative effects on created html or text (for example unwanted line breaks) ?
You can create variables using th:with so that you dont have to do frequent objA.propB.propC. So you assign th:with="propB=${objA.propB}"
Then creating reusable fragments with parameters in another good approach so any HTML which is getting repeated can be extracted into a fragment and the data required for that fragment can be passed as argument.
Update:
<div class="profile-user-info">
<th:block th:insert='~{::profileInfoRow("Name", ${user.name}) }' />
<th:block th:insert='~{::profileInfoRow("Age", ${user.age}) }' />
<th:block th:insert='~{::profileInfoRow("Location", ${user.location}) }' />
</div>
<div th:fragment="profileInfoRow(label, value)">
<div class="profile-info-row">
<div class="profile-info-name">[[${label}]]</div>
<div class="profile-info-value">[[${value}]]</div>
</div>
</div>
So above is a simple way you can create a reusable section of HTML and then use thymeleaf directives to include the reusable section by passing in the values for dynamic arguments.
Related
I have a dynamically created Ember's views which are connected from some sub-parts stored in the DB. I'm also using a Jsoup for modifying the template to include some other non-Ember parts. Unfortunately when my stored ember part contains attribute binding in common way:
<li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
The Jsoup tries to "fix" them by adding empty quotes like, which is of course expected behavior:
<li {{bindattr="" class="isCompleted:completed isEditing:editing" }}="">
Is there any way for binding the attributes ie. by wrapping it within some valid HTML
ie. like data-ember='{{bindAttr "something"}}' or at least a way for preventing Jsoup from these changes?
The problem here is (as you surely already know) that Jsoup tries to parse your HTML markup with the included handlebars expressions, and by doing so it check's for valid HTML, so in the case of bindAttr this is interpreted as a attribute for your <li> tag, and because a valid attribute is something like class="foo" Jsoup converts it to bindAttr="".
Lamentably there is no built-in way of telling Jsoup to ignore tags with no values. I guess you should try another tool that fit's your needs.
Hope it helps.
In Play! Framework v. 1.x there was such thing like a 'tag' where was possible to reuse some thml/template code.
In Play! Framework v 2.x, for me it is not clear still how it's going to be used (here).
For example, I want to use tag to define a header for my site (in order not to repeat myself, but just include the header every in the pages where I need it).
Could someone explain me / show how to use tags, or whatever I should use to include the header or any block of html/template code.
You showed us a sample and you are asking for sample :)
That's easy, create a common view in views.tags package (remember to leave first line empty if you're not gonna to pass any params! also remember to add brackets after tags name):
/app/views/tags/header.scala.html
<div id="header">
<h1>Hello World!</h1>
</div>
So you can 'include' it in any other view just with:
<body>
#tags.header()
Some other content
</body>
I am creating a simple web application to try out JSF2 with PrimeFaces, so far really impressed by how much it can do out of the box. Going through various tutorials and articles I have a question about properties in templates and whether it is possible to insert these.
I know I can insert chunks of HTML content in templates, for example:
<title>
<ui:insert name="title">Default Title</ui:insert>
</title>
But in some cases it would be useful to insert at property level. The specific one I thought of was TabMenu, where if you were using a TabMenu for navigation (and you want the same TabMenu on every page so it makes sense to use a template), you would want to set the 'activeIndex' differently depending on which page you were looking at. This however does not seem to work in a template file:
<p:tabMenu <ui:insert name="activeIndex">activeIndex="0"</ui:insert>>
<p:menuitem value="Overview" outcome="main" icon="ui-icon-star"/>
<p:menuitem value="Demos" outcome="demos" icon="ui-icon-search" />
<p:menuitem value="Documentation" outcome="docs" icon="ui-icon-document"/>
</p:tabMenu>
Hope that makes sense. Is there a way to do this, or is this design just completely wrong and there is a much better way of doing it?
Pass it as <ui:param>.
E.g. in template client:
<ui:composition template="/WEB-INF/templates/some.xhtml">
<ui:param name="activeIndex" value="0" />
...
</ui:composition>
and in master template:
<p:tabMenu activeIndex="#{activeIndex}">
So the if binding of KnockoutJs is powerful, but I need to use it in a template block because I have to bind nested content E.G. <UL>'s.
<script id="my-template3" type="text/html">
<span data-bind="if:IsInherited">foobar</span><br />
</script>
This doesn't seem to render no matter what $data.IsInherited is set to. How can one perform an if databind in a tempate block using KnockoutJs?
As posted in the comments.
Are you using jquery.tmpl because if that is included I believe the control flow bindings will not work in script blocks.
Using native only will solve that
Cheers
first question here :)
I'm currently experimenting with my first WordPress theme over at http://ahrengot.com/, but i've come to learn that WP has the odd behaviour of throwing random line breaks into your markup.
This is a simplification of what i have:
<br>
<section>...</section>
<br>
<p> </p>
<section>...</section>
<br>
I need to remove the line breaks before and after each section. Note that there are both br tags and ANDnbsp;'s here. I suppose i need RegEx for this, but I have absolutely no experience with that, so if anyone could point me in the right direction I would be very thankful :)
Which version of WP?
Does it add breaks when there is extra space after your elements in the HTML view? I am a Wordpress user and I don't have this problem at all. I have the "fix invalidly nested XHTML" box selected.
Here is a thread on the codex that has a suggested patch:
http://wordpress.org/support/topic/empty-content-creates-an-extra-ltbrgt
Did you write the theme from scratch? If not you might want also to check your theme functions file to make sure the 'wpautop' function isn't being overridden or called with a different param.
You can cheat, but it may break other things by "hiding" the breaks. It works best if it's inside some sort of wrapping class.
.wrappingClass br {
display:none;
}
You can try <?php remove_filter ('the_content', 'wpautop'); ?> at the top of your template.