I'm trying to use the extend keyword to add a comment-box (a view placed under default/comment_box.html) across several of my views, by:
...
<hr/>
{{extend "default/comment_box.html"}}
<span id="master">
...
But, when this executes, all the part of the view after the extend statement is not being rendered and all I'm getting is:
...
<hr/>
<!--Content from the Comment-Box-->
As you can see, the part after the extend statement, i.e. <span id="master"> has gone missing. The Web2Py examples seem to be doing it the same way. Am I missing something here? Why is it truncating abruptly after the extend statement?
I think you want:
{{include 'default/comment_box.html'}}
If you use {{extend 'default/comment_box.html'}}, the comment_box.html view must contain an {{include}} directive somewhere, in which case, the content of the extending view gets included in place of that {{include}} directive. On the other hand, if you simply want to include the contents of comment_box.html within your view, you need to use {{include 'default/comment_box.html'}}.
See here for more on extend and include.
Related
I have a blade template that has some HTML and some JS code. For both case 1 and 2 I'd like to use the same template as it's used in multiple places.
Case 1: include the template with the normal behaviour, so that the code in the template gets executed. This works with the normal behaviour of using #include('template')
Case 2: include the template without the HTML and JS actually being interpreted.
Now I could solve this by making it an x-template component, and then pass a variable to that component that will conditionally wrap the template in <xmp></xmp>.
But the problem is that I use Highlightjs, and that doesn't work if the code is in those xmp tags. It needs to be in <pre><code></code></pre>.
So I'm wondering if you can pass some parameter or do something to include a blade template without actually interpreting the code that's being included.
Update
A bit more clarification. Let's say template.blade.php has this:
<div id="test"></div>
<script>
alert('test');
</script>
In case 1 using #include('template') should alert test when the page is loaded.
In case 2 using #include('template') (but then another way I guess, that's what this question is about) I'd like it to display the code without interpreting it, like would happen when using <code>{{ '<div id="test"></div><script>alert('test');</script>' }}</code>.
According to Thymeleaf docs
Fragments can include any th:* attributes. These attributes will be evaluated once the fragment is included into the target template (the one with the th:insert/th:replace attribute), and they will be able to reference any context variables defined in this target template.
My Fragment
<div th:fragment="link">
<a th:href="#{${url}}"><span th:inline="text">[[${text}]]</span></a>
</div>
This is how I include it.
<div th:replace="fragments/common :: link" th:with="url='www.google.com', text='Click Me'"></div>
The html i get
<a href="">
<span>null</span>
</a>
However the same works fine with th:include and gives me following HTML.
<a href="www.google.com">
<span>Click Me</span>
</a>
Why th:replace doesn't work while th:inlcude works fine?
NOTE: th:insert is out of scope because i am using Thymeleaf v2.1.5
The reason is that th:replace actually removes current tag so you lose every attribute you had there, but get all the attributes from fragment. And in your case this means that you never defined any th:with variable in the scope.th:include works the opposite way. You loose fragment tag, but keep everything defined in layout.
Consider this fragment:
<fragmenttag th:fragment="link" style="background-color: red">...</fragmenttag>
And layout:
<layouttag th:include="fragments/common :: link" style="font-size: 250%;"/>
<layouttag th:replace="fragments/common :: link" style="font-size: 250%;"/>
The result is:
<layouttag style="font-size: 250%;">Some Text</layouttag>
<fragmenttag style="background-color: red">Some Text</fragmenttag>
If you want to use th:replace, because you have some important attributes in fragment, you can define everything you need in some parent tag in layout.
<body th:with="url='www.google.com', text='Click Me'">
<div th:replace="fragments/common :: link" ></div>
</body>
You are referencing documentation in your post:
Fragments can include any th:* attributes. These attributes will be
evaluated once the fragment is included into the target template (the
one with the th:insert/th:replace attribute), and they will be able to
reference any context variables defined in this target template.
And i don't see any contradiction here, because this part of the documentation is about th:* attributes inside a fragment.
Fragments (th:fragment part) can include any th:* attributes.
And in your question you are talking about loosing th:* attributes defined in target template. But anyway, this part is quite strait that you perform inclusion logic first
These attributes will be evaluated once the fragment is included
There is nothing here that lets you assume that you will get everything you defined in target template or fragments main tag, because both of them can be replaced depending on witch inclusion strategy you are going to use (th:insert/th:replace).
So you defined th:with="url='www.google.com', text='Click Me'" attribute, but it was never included in the end result template because you selected th:replace inclusion strategy, so th:with attribute was never evaluated and you got no url and text variables in scope. No contradiction here.
Seems like a similar (not same) issue thank the one mentined in this post
As a workaround for this issue you can still use th:include and then remove the extra div by using th:remove="tag", something like:
<div th:include="fragments/common :: link" th:with="url='www.google.com', text='Click Me'" th:remove="tag"></div>
I have problem with including Joomla views. I have many views in my extension and I want to include another one in my Dialog.
How can I do it?
In my first view I have this code:
<div id="modalDostawca" title="Dostawcy">
<div id="wewM">
//in here i want to include view data/tmpl/default.php
</div>
</div>
What kind of extension is your extension? A module? A component?
If it's a component, what you are trying to include is a template for a view, not a view! (the view is the one with view.html.php). Create a view + template for what you are trying to see. I don't think Joomla! can call multiple views at the same time. If you can reuse code inside models (if this is your concern).
You can also include files the normal way, with include(...).
I am having a problem where I try to render a <table> inside of parent container, but MVC3 Razor always renders the outside of the container tag. This causes problems when trying to control the outside parent container via Javascript.
Razor Example:
<span id="mySpan">
#Html.Action("Table1", "GetMyTable")
</span>
HTML that is output:
<span id="mySpan"></span>
<table>
<thead><tr><th>Header</th></tr></thead>
<tbody>
<tr><td>Foo</td></tr>
<tr><td>Bar</td></tr>
</tbody>
</table>
No matter which parent container I try to stick the table into, a div, span, p, the table always renders OUTSIDE the container's tags! Can anyone explain what I am doing wrong? How should I code the Razor syntax to properly add the table inside those tags?
as you are viewing the output in Firebug, what is happening is you are seeing an "effective" view of the html, after the browser engine has parsed it.
in HTML5, many tags do not need to be explicitly closed. If you include a tag "inside" another that is invalid (like a table inside a span), the browser assumes what you are doing is using an unclosed span tag, so it automatically closes it for you before starting the table tag.
The easiest fix here would be either not to "wrap" the table, or wrap it with something that HTML5 considers valid, such as a section tag.
Another option would be going back to XHTML1.1, where a table is valid inside a div (but not inside a span). Also, XHTML requires explicit closing tags, so this behavior would not show up there. (the same thing for XHTML5, though it's still invalid to wrap a table with a div in XHTML5)
Viewing the raw source would reveal that Razor is not axtually changing anything here; it is the browser. It is good to see this, though; so you know what the browser is expecting and how it's handling what you are sending it.
Actually the question is in the subj...
Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?
For example I would like to create template with this markup:
<style>
div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
<h2>I'm template</h2>
<p>{{welcomeMessage}}</p>
</div>
Yes you can put your templates in <div>s rather than <script>s, for example:
http://jsfiddle.net/ambiguous/RucqP/
However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).
Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.