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 factory methods.


Including an external script "application/javascript" )
    .source( "http://myscript" )
    .async( true )
    .defer( true )
    .charset( "utf-8" )

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; MediaType.TEXT_HTML )
   				.add( "hello" )  ) )

Nested script elements

Things get a bit more complicated when you start nesting ScriptViewElements. Suppose you have the following configuration: ).type( MediaType.TEXT_HTML )
     .add( "hello" ) )
        script( ).type( MediaType.TEXT_HTML )
          .add( "nested hello" ) ) )
     .add( "goodbye" ) )

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">
  <i data-bum-ref-id="[UNIQUE_ID]" style="display: none; visibility: hidden;"></i>
<script type="text/html" id="[UNIQUE_ID]">
  <p>nested hello</p>

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
                 } );

Changing the replacement tag

You can change the default i tag that is used by setting the refTagName property.

Not rendering a replacement element

If you do not want to render a replacement element, set the refTagName property to an empty string (or use ScriptViewElement.NO_REF_TAG).