nas/todo_api
2
1
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity

Handlebars examples

Browse source
This commit is contained in:
Maurits van der Schee 2016-04-17 12:48:32 +02:00
commit 45de181257
2 changed files with 136 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
examples/client_handlebars.html Normal file
View file

@ -0,0 +1,67 @@
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.runtime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script src="../lib/php_crud_api_transform.js"></script>
<script id="PostListTemplate" type="text/mustache">
<ul>
{{#posts}}
<li>
<span class="id">{{id}}</span>, <span class="content">{{content}}</span>
<a href="javascript:void(0)" class="edit">edit</a>
<a href="javascript:void(0)" class="delete">del</a>
</li>
{{/posts}}
<li>
<form>
<input name="content"/>
</form>
</li>
</ul>
</script>
<script>
function PostList(element, template) {
var self = this;
var url = '../api.php/posts';
self.edit = function() {
var li = $(this).parent('li');
var id = li.find('span.id').text();
var content = li.find('span.content').text();
content = prompt('Value',content);
if (content!==null) {
$.ajax({url:url+'/'+id, type: 'PUT', data: {content:content}, success:self.update});
}
};
self.delete = function() {
var li = $(this).parent('li');
var id = li.find('span.id').text();
if (confirm("Deleting #"+id+". Continue?")) {
$.ajax({url:url+'/'+id, type: 'DELETE', success:self.update});
}
};
self.submit = function(e) {
e.preventDefault();
var content = $(this).find('input[name="content"]').val();
$.post(url, {user_id:1,category_id:1,content:content}, self.update);
};
self.render = function(data) {
element.html(Handlebars.compile(template.html())(php_crud_api_transform(data)));
};
self.update = function() {
$.get(url, self.render);
};
self.post = function() {
$.post(url, {user_id:1,category_id:1,content:"from mustache"}, self.update);
};
element.on('submit','form',self.submit);
element.on('click','a.edit',self.edit)
element.on('click','a.delete',self.delete)
self.post();
};
$(function(){ new PostList($('#PostListDiv'),$('#PostListTemplate')); });
</script>
</head>
<body>
<div id="PostListDiv">Loading...</div>
</body>
</html>

69
examples/client_handlebars_compiled.html Normal file
View file

@ -0,0 +1,69 @@
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.runtime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script src="../lib/php_crud_api_transform.js"></script>
<script>
var PostListTemplate = {"1":function(container,depth0,helpers,partials,data) {
var helper;
return " <li>\n <span class=\"id\">"
+ container.escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"id","hash":{},"data":data}) : helper)))
+ "</span>, <span class=\"content\">"
+ container.escapeExpression(((helper = (helper = helpers.content || (depth0 != null ? depth0.content : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"content","hash":{},"data":data}) : helper)))
+ "</span>\n <a href=\"javascript:void(0)\" class=\"edit\">edit</a>\n <a href=\"javascript:void(0)\" class=\"delete\">del</a>\n </li>\n";
},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var stack1, helper, options, buffer =
"\n<ul>\n";
stack1 = ((helper = (helper = helpers.posts || (depth0 != null ? depth0.posts : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"posts","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},options) : helper));
if (!helpers.posts) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
if (stack1 != null) { buffer += stack1; }
return buffer + " <li>\n <form>\n <input name=\"content\"/>\n </form>\n </li>\n</ul>\n";
},"useData":true}
</script>
<script>
function PostList(element, template) {
var self = this;
var url = '../api.php/posts';
self.edit = function() {
var li = $(this).parent('li');
var id = li.find('span.id').text();
var content = li.find('span.content').text();
content = prompt('Value',content);
if (content!==null) {
$.ajax({url:url+'/'+id, type: 'PUT', data: {content:content}, success:self.update});
}
};
self.delete = function() {
var li = $(this).parent('li');
var id = li.find('span.id').text();
if (confirm("Deleting #"+id+". Continue?")) {
$.ajax({url:url+'/'+id, type: 'DELETE', success:self.update});
}
};
self.submit = function(e) {
e.preventDefault();
var content = $(this).find('input[name="content"]').val();
$.post(url, {user_id:1,category_id:1,content:content}, self.update);
};
self.render = function(data) {
element.html(Handlebars.template(PostListTemplate)(php_crud_api_transform(data)));
};
self.update = function() {
$.get(url, self.render);
};
self.post = function() {
$.post(url, {user_id:1,category_id:1,content:"from mustache"}, self.update);
};
element.on('submit','form',self.submit);
element.on('click','a.edit',self.edit)
element.on('click','a.delete',self.delete)
self.post();
};
$(function(){ new PostList($('#PostListDiv'),$('#PostListTemplate')); });
</script>
</head>
<body>
<div id="PostListDiv">Loading...</div>
</body>
</html>