Jquery.Tmpl

JQuery.Tmpl
2015/06/26
李佳駿

Knockout.js Template
Angular.js Directive
ASP.NET MVC Partial view
ASP.NET Web Form user control

Knockout Template -1
<h1>People</h1>
<div data-bind="template: 'peopleList'">
</div>
<script type="text/html" id="peopleList">
{{each people}}
<p>
<b>${name}</b> is ${age} years old
</p>
{{/each}}
</script>

Knockout Template -2
<script type="text/javascript">
var viewModel = {
people: ko.observableArray([
{ name: 'Rod', age: 123 },
{ name: 'Jane', age: 125 }
]) };
ko.applyBindings(viewModel);
</script>

Angular Directive
Index.html:
<product-title></product-title>
App.js:
app.directive('productTitle', function(){
return {
restrict: 'E',
templateUrl: 'product-title.html'
};});

ASP.NET MVC Partial
view
@model MvcApplication2 .Models.PartialModel2
<p>
<div>
@Html.Partial("PartialView1", Model.partialModel)
</div>
</p>

Jquery.tmpl
1. Set Data
2. Get Data
3. Update Data
4. Each
5. If ELSE
6. Call funtion

Set Data - 2
<script src="Scripts/jquery-1.4.4.min.js"
type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.min.js"
type="text/javascript"></script>

Set Data - 3
<body>
<table>
<thead>
<th> First Name </th>
<th> Last Name </th>
<th> Age </th>
</thead>
<tbody id="employeeContainer"> </tbody>
</table>
</body>

Set Data - 4
<script id="MyTemplate" type="text/x-jquery-tmpl">
<tr>
<td>${FirstName}</td> // {{FirstName}}
<td>${LastName}</td> // {{LastName}}
<td>${Age}</td> // {{Age}}
</tr>
</script>

Set Data - 5
$(function() {
var employeeData = [
{ FirstName: "Rob", LastName: "Mathews", Age: 26 },
{ FirstName: "Richie", LastName: "Richards", Age: 32 } ];
$("#MyTemplate").tmpl(employeeData)
.appendTo("#employeeContainer");
};
</script>

Get Data
$.tmplItem(‘#employeeContainer’)
.data. FirstName;

Update Data
function update() {
var tmpl_item =
$("# employeeContainer ").tmplItem();
tmpl_item.data.FirstName = "new value";
tmpl_item.update();
}

Each-1
<script id="each" type="text/x-jquery-tmpl">
<li>ID: ${ID}; Name: ${Name};<br />Langs:
<ul>
{{each Langs}}
<li>${$index + 1}: <label>${$value}. </label></li>
{{/each}}
<ul> </li>
</script>

Each-2
$(function () {
var userLangs = [
{ ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English'] },
{ ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']} ];
$('#each').tmpl(userLangs).appendTo('#eachList');
});
</script>

IF Else
<tr>
<td>{{if Age > 40}}
Yes
{{else}}
No
{{/if}}
</td>
</tr>
</script>

Call Function -1
function GetName(firstName, lastName) {
return firstName + " " + lastName;
}
</script>

Call Function -2
<tr>
<td>${GetName(FirstName, LastName)}</td>
</tr>
</script>

JsRender
JsRender: Next-generation jQuery Templates
http://www.jsviews.com/#jsrender

Reference List
http://www.codeguru.com/csharp/csharp/working-with-jquery-templates.htm
http://www.dotblogs.com.tw/regionbbs/archive/2012/01/19/partial.view.in.asp.ne
t.mvc.aspx
http://blog.sanc.idv.tw/2011/08/aspnet-mvc-mvc.html
http://abraham.cs.uml.edu/~heines/91.461/resources/jQuery_tmpl_API.pdf
https://github.com/BorisMoore/jquery-tmpl
http://www.cnblogs.com/think8848/archive/2011/07/17/2108570.html
http://www.jsviews.com/#samples/jsr/composition/tmpl
http://borismoore.github.io/jsrender/demos/
http://www.dotblogs.com.tw/regionbbs/archive/2012/01/19/partial.view.in.asp.ne
t.mvc.aspx

Jquery.Tmpl

More Related Content

What's hot

More from LearningTech

Recently uploaded

Jquery.Tmpl