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

我有下面的方法，通过ajax查询我的服务器，JSON数据返回，并且我遍历数据并写出html。如何在不使用其他插件的情况下使用jQuery的模板？

该代码有效，但它是混乱和效率低下。有没有办法把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 + ']'); 
    }); 
});

来源

2013-07-26 SkyeBoniwell

你可以看看jGrid，http://www.trirand.com/blog/?page_id=5似乎是一个用于将json数据连接到表的很好的包。 – Bearcat9425

我想如果你想在脚本中填充数据，那么它将不可能在sperate html模板中添加它。我会建议你做一个JavaScript函数来建立HTML –

这个问题基本上是你在找什么（没有插件，但通过向原型对象添加一个额外的方法）。

在这里阅读接受的答案：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);

来源

2013-07-26 14:57:12 Anil

您可以使用jQuery/JS模板引擎jquery template，jsRender，dust.js之一。有一个。

来源

2013-07-26 14:46:42 YD1m

您可以使用xml data islands在嵌入文件中存储html片段（这将是您的模板）。如果您不介意以xml兼容的方式（即<', >'，&）写出特殊字符<,>,&（这不需要是有效的xml）。可通过调用jQuery.parseHTML(nd_xml.text())将片段转换为dom片段，其中nd包含数据岛中包含html片段的xml节点的DOM节点。模板数据中的文本替换可以以明显的方式应用。

来源

2013-07-26 14:47:08 collapsar

你为什么不使用一些knockout？

Here's a jsFiddle with an example。

HTML

<input id="searchBtn" type="button" value="Search" data-bind="click: SearchItems" /> 
<table data-bind="foreach: Items"> 
    <tr data-type="user" data-bind="attr: { 'data-result-title':DisplayName(), 'data-result-id':Id() }"> 
     <td data-bind="text: DisplayName()"></td> 
     <td> 
      <input type="button" class="select" value="select" style="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" /> 
     </td> 
    </tr> 
</table>

的Javascript

var id = 0; 

function Item(id, name) { 
    var self = this; 
    self.Id = ko.observable(id); 
    self.DisplayName = ko.observable(name); 
} 

function ItemsModel() { 
    var self = this; 
    self.Items = ko.observableArray([]); 
    self.SearchItems = function() { 
     self.Items.push(new Item(id++, 'Some Name ' + id)); 
    } 
} 

$(function() { 
    ko.applyBindings(new ItemsModel()); 
});

来源

2013-07-26 15:15:01 sergioadh

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

回答

相关问题