我有下面的方法通过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;"> </td><td style="padding-top: 4px;"><input id="btnAddMembers" type="button" value="Add Members" /></td></tr>';
$(html).appendTo('[name=' + div + ']');
});
});
答案 0 :(得分:4)
这个问题基本上是你要找的(没有插件,但是通过向原型对象添加一个额外的方法)。
在此处阅读已接受的答案: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);
答案 1 :(得分:1)
您可以使用jquery / js模板引擎之一jquery template
,jsRender
,dust.js
。有a lot of them。
答案 2 :(得分:1)
您可以使用xml data islands在嵌入文件中存储html片段(这将是您的模板)。如果您不介意以xml兼容的方式写出特殊字符<
,>
,&
(即。<',
&gt;',则无需使用xml ,&
)。可以通过调用jQuery.parseHTML(nd_xml.text())
将片段转换为dom片段,其中nd
包含包含html片段的数据岛中xml节点的DOM节点。
模板数据中的文本替换可以以明显的方式应用。
答案 3 :(得分:1)
为什么不使用某些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());
});