Home/ Questions/Q 8978841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:42:16+00:00

I’m trying to set up pages as templates for an application that eventually needs

  • 0

I’m trying to set up pages as templates for an application that eventually needs to work offline.

Right now I’m playing around with snippets of HTML code (= enhanced but unformatted jquery mobile elements), which I’m storing as HTML pages like so:

<!-- template_listview.html -->
<!DOCTYPE html>
<html>
<head><title>static_listview_templates</title></head>
<body>


<!-- listview basic start -->
<ul id="tmp_listview_basic" class="ui-listview"></ul>
<!-- listview basic end -->

<!-- listview inset start -->
<ul id="tmp_listview_inset" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"></ul>
<!-- listview inset end -->

</bdoy>
</html>

My application uses requireJS, so the first time the user hits a page that contains a listview (with a data-config attribute specifying dynamic content to load as well as listview appearance), require pulls the above template, which will be cached for all subsequent uses.

Right now the page above is returned as HTML string. As it will include all “variations” of listview elements (<ul>,<ol>,<li>...), I need some means of selecting the element I need on the specific occasion, which is where I’m stuck right now.

Question:
In terms of performance, is it better to work with a big string of the returned HTML template and try to extract the necessary substrings or should I instead wrap this into $() and use jquery/javascript to pull what I need?
If it should be a string, is there an easy way to pull an element (from to) from this string?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d assume string abstraction would be better performance-wise.

    In fact, if I am right in thinking that you want to get the relevant listviews from the result as a string then according to the following jsperf test I wrote, string abstraction is much quicker:

    http://jsperf.com/jqobj-vs-string-abstraction

    Therefore, you can use the string abstraction method I wrote for that test to get your listviews from the result:

    function getTemplateBlock(block, context) {
    var regex = new RegExp('<!-- ' + block + '(.)+' + block + '(.)+?-->'),
        tmpl = context.match(regex);

    return tmpl.length ? tmpl[0].replace(/<!--[\s\S]*?-->/g, '') : '';
}

// get listview templates where 'mystuff' is
// the HTML string returned by your request
var basic = getTemplateBlock('listview basic', mystuff),
    inset = getTemplateBlock('listview inset', mystuff);

    Also, the answer to your question on how to select from your created object is in that jsperf too… 

    $('<div />').html(mystuff).find('ul');

    This is necessary because .find() searches the descendants of the matched elements so if we make the matched element a new <div /> and append our result, we can search the <div /> for our <ul />‘s.

    Taken from the jQuery docs:

    “Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.”

    • 0