How can I use templates with jQuery without additional plugins?

Question

I have a method below that requests my server via ajax, the JSON data is returned, and I look through the data and write it in html.

The code works, but it is dirty and inefficient. Is there a way to put html in a template, instead of writing it to javascript code?

thanks

$("[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

This question is basically looking for what you are looking for (without a plugin, but by adding an additional method to the prototype object).

Read the accepted answer here: Recommended jQuery Templates for 2012

The main JSFiddle is here: CLICK

Very simple and easy to edit and extend, JSfiddle should give you a good idea of ​​how this works.

---

Code:

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); 

Answer 2

You can use one of the jQuery / js jquery template , jsRender , dust.js jquery template dust.js . There are a lot of them .

Answer 3

you can use xml data island to store html fragments (which will be your templates) in your embed file. this should not be a valid xml unless you mind writing special characters < , > , & in an xml-compatible way (i.e. <', >', & ). fragments can be turned into dom fragments by calling jQuery.parseHTML(nd_xml.text()) , where nd contains the DOM node xml node on the data island containing the html fragment. textual substitutions in template data can be applied in an obvious way.

Answer 4

Why don't you use knockout ?

Here's 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()); });