Load html templates to JavaScript variable

Question

I am saving all the HTML templates to a single file. This file contains a loads of templates (more than 50).

<script type="text/html" id="template-1">
    <p>Template 1</p>
</script>
<script type="text/html" id="template-2">
    <p>Template 2</p>
</script>

I need to load the templates to js variable.

I have looked at JQuery load method but it loads the template to attach it to DOM which is not i need here.

Any JQuery or AngularJS solution will work for me.

My question is: why? I mean, it's full of templating engines out there, just why this? — briosheje
– briosheje, Commented Jun 10, 2015 at 13:31
I agree, I think this question needs more context to be answered properly. — muchwow
– muchwow, Commented Jun 10, 2015 at 13:33
I don't know why you want this, but why not an AJAX call? you could set the variable on success... — JSelser
– JSelser, Commented Jun 10, 2015 at 13:35
@LionC I'm assuming by create the OP means render and that since which template needs to be rendered is dependent on the user's input/actions they don't want to load all templates on page load but rather on demand. — Jack
– Jack, Commented Jun 10, 2015 at 13:49

Jack · Accepted Answer · 2015-06-10 13:47:05Z

1

You can make a regular ajax call using $.get and then filter out the elements from the response (without attaching anything to the DOM).

For example

 $.get("templateUrl", function (data) {
   var $doc = $(data);
   var firstTemplate= $doc.filter('#template-1').html()
   var secondTemplate e= $doc.filter('#template-2').html()
     //..Load rest of templates into variables
 });

edited Jun 10, 2015 at 13:47

answered Jun 10, 2015 at 13:35

Jack

11k13 gold badges52 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load html templates to JavaScript variable

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related