jQuery或javascript中的html模板

Question

This is a very short example, but I was wondering if there is a way of using an xml or html file with html markup instead of including it in the javascript like I do below.

I know there are template libraries out there, but I really just want to do something simple and not involve any libraries other than jQuery.

var description = this.name;

if description == 'full') {
    return "<div><textarea cols='50' rows='50'>" + this.value + "</textarea></div>";
} else {
    return "<div><textarea cols='50' rows='15'>" + this.value + "</textarea></div>";
};

Thanks

Answer 1

In general, without a template engine you have three options:

a) Adding the template directly into your markup as script tag

<script type="text/template" data-template="stats">
   <div id="content">
      ...
   </div>
</script>

The html code inside the script tag could be accessed with the following code:

$("script[data-template=" + templateName + "]").html()

The big benefit of this approach is that you are not making another http request.

b) Putting the template in external file and load it via ajax.

$.ajax({
    url: "test.html"
}).done(function(html) {
    ...
});

c) Doing the things like you already did.

Answer 2

如果使用AJAX调用文件，则可以使用文件的结果，该结果可以是XML或嵌套的HTML等。

Answer 3

I define a hidden div on my markup - then give it a generic ID, then in javascript I use the jQuery.clone() method to make a clone of that markup, and in the markup I define the template macro values that can then be injected with the real data using .replace..

HTML:

<div id="mytemplate">
Name: {0}
</div>

JS/jQuery:

var clone = $('#mytemplate').clone();

Then perform the replacements on the clone object and simply append to the DOM where desired!