Script elements
A ScriptViewElement writes a <script> tag to the output.
This can reference either an external script or hold a body of any type of script.
Nesting <script> tags is not supported by browsers.
Because of this a ScriptViewElement will defer nested ScriptViewElements to write sequentially instead.
This makes it a handy tool for building client-side HTML templates using ViewElements.
See the examples for a detailed explanation.
Element and builder
The ViewElement implementation is ScriptViewElement and has an equivalent ScriptViewElementBuilder.
A builder can be created using BootstrapViewElements.bootstrap.builders.script() factory methods.
Examples
Including an external script
BootstrapViewElements.bootstrap.builders.script( "application/javascript" )
.source( "http://myscript" )
.async( true )
.defer( true )
.charset( "utf-8" )
.build()Including a HTML template
As a ScriptViewElement is a regular NodeViewElement, you can easily build a HTML template by adding child elements.
import static com.foreach.across.modules.web.ui.elements.HtmlViewElements.html;
import static com.foreach.across.modules.web.ui.elements.TextViewElement.text;
import static com.foreach.across.modules.bootstrapui.ui.factories.BootstrapViewElements.bootstrap;
bootstrap.builders.script().type( MediaType.TEXT_HTML )
.add( html.builders.p().add( bootstrap.builders.text( "hello" ) ) )
.build()Nested script elements
Things get a bit more complicated when you start nesting ScriptViewElements.
Suppose you have the following configuration:
bootstrap.builders.script( ).type( MediaType.TEXT_HTML )
.add(
html.builders.p().add( bootstrap.builders.text( "hello" ) )
)
.add(
script( ).type( MediaType.TEXT_HTML )
.add( html.builders.p().add( bootstrap.builders.text( "nested hello" ) ) )
)
.add(
html.builders.p().add( bootstrap.builders.text( "goodbye" ) )
)
.build()Because nesting of <script> tags is not supported by browsers, the nested scripts will be written sequentially instead.
In the original location a different element will be written with a reference to the actual <script> element.
<script type="text/html">
<p>hello</p>
<i data-bum-ref-id="[UNIQUE_ID]" style="display: none; visibility: hidden;"></i>
<p>goodbye</p>
</script>
<script type="text/html" id="[UNIQUE_ID]">
<p>nested hello</p>
</script>The actual <script> element output gets a unique HTML id assigned.
The replacement element holds a data attribute with the same id value for easy retrieval.
Using the data-bum-ref-id attribute client scripts can access the original element output.
Nesting ScriptViewElements only works well when using them for HTML (or other HTML-like) templates.
|
Client-side processing
It is up to client scripts to traverse the replacement element to the actual script element written. The BootstrapUiModule javascript provides a utility function which can do this transparently using JQuery.
The following snippet would return the JQuery elements with the target nodes:
BootstrapUiModule.refTarget( $( '[data-bum-ref-id]' ) )
.each( function( node ) {
// do something with the html template
} );