https://www.jsviews.com
1. jsrender
2. jsviews
3. jsobservable
jsrender.html:-
------------------
jsviews.html:-
-----------------
jsobservable.html:-
-----------------------
1. jsrender
2. jsviews
3. jsobservable
jsrender.html:-
------------------
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsrender.js"></script>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<div>
<em>Name:</em> {{:name}}
{{if showNickname && nickname}}
(Goes by <em>{{:nickname}}</em>)
{{/if}}
</div>
</script>
<script>
var data = [
{
"name": "Sreekanth",
"nickname": "Sree",
"showNickname": true
},
{
"name": "Santhan",
"nickname": "Kumar",
"showNickname": false
}
];
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
</body>
</html>
-----------------
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsrender.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.observable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.views.min.js"></script>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
<div>
Edit: <input type="checkbox" data-link="editable" />
<em>Name:</em> {^{:name}}
{^{if showNickname && nickname}}
(Goes by <em data-link="nickname"></em>)
{{/if}}
{^{if editable}}
<div>
<input data-link="name" />
<input data-link="nickname" />
Show nickname: <input type="checkbox" data-link="showNickname" />
</div>
{{/if}}
</div>
</script>
<script>
var data = [
{
"name": "Sreekanth",
"nickname": "Sree",
"showNickname": true
},
{
"name": "Pradeep",
"nickname": "Reddy",
"showNickname": false
}
];
var template = $.templates("#theTmpl");
template.link("#result", data);
</script>
</body>
</html>
-----------------------
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsrender.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.observable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jquery.views.min.js"></script>
</head>
<body>
<table><tbody id="result"></tbody></table>
<script id="theTmpl" type="text/x-jsrender">
<tr>
<td>
<button id="addBtn">Add</button>
</td>
</tr>
{^{for people}}
<tr>
<td>
<button class="change">Change</button>
<button class="remove">Delete</button>
{^{:name}}
</td>
</tr>
{{/for}}
</script>
<script>
var template = $.templates("#theTmpl");
var people = [
{
name: "Sreekanth"
},
{
name: "Reddy"
}
];
var counter = 1;
template.link("#result", {
people: people });
$("#addBtn").on("click", function () {
$.observable(people).insert({ name:
"name" + counter++ });
})
$("#result")
.on("click", ".change", function () {
var dataItem = $.view(this).data;
$.observable(dataItem).setProperty("name", dataItem.name + "*");
})
.on("click", ".remove", function () {
var index = $.view(this).index;
$.observable(people).remove(index);
});
</script>
</body>
</html>
No comments:
Post a Comment