jquery - 如何在不使用其他插件的情况下使用 jQuery 模板？

Question

我有下面的方法，通过ajax查询我的服务器，返回JSON数据，然后循环数据并写出到html。

代码可以工作，但很困惑且效率低下。有没有办法将 html 放入某种模板中，而不是将其写在我的 javascript 代码中？

谢谢

 $("[name=btnSearch]").on("click", function () {   
   $.getJSON(ajaxMethod + searchTerm, function (data) {
        var html = "";
        var sel = "";
        var name = "";
        var type = "";
        //alert(id);
        var css = "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only";
        $.each(data, function (key, val) {
                sel = val.ID;
                name = val.DisplayName;
                type = "user";
            html += '<tr data-type = "' + type + '" data-result-title = "' + name + '" data-result-id="' + sel + '">';
            html += '<td id="' + sel + '">' + name + '</td>';
            html += '<td><input type="button" class="select" value="select" style="' + css + '"></td>';
            html += '</tr>';
        });
        //html += '<tr><td style="padding-top: 4px;">&nbsp;</td><td style="padding-top: 4px;"><input id="btnAddMembers" type="button" value="Add Members" /></td></tr>';
        $(html).appendTo('[name=' + div + ']');
    });
 });

Answer 1

这个问题基本上满足了您的需求(没有插件，但通过向原型(prototype)对象添加额外的方法)。

在此处阅读已接受的答案:Recommended jQuery templates for 2012?

<强> A basic JSFiddle is here: CLICK

非常简单，并且易于编辑和扩展，JSfiddle 应该能让您很好地了解它是如何工作的。

<小时/>

代码:

HTML:

<script type="text/template" id="cardTemplate">
<div>
    <a href="{0}">{1}</a>
</div>
</script>

<div id="container"></div>

JS:

String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};

var cardTemplate = $("#cardTemplate").html();
var template = cardTemplate.format("http://example.com", "Link Title");
$("#container").append(template);