如何在不使用其他插件的情況下使用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的模板？

回答

相關問題