nas
/
todo_api
Watch 2
Star 1
Fork 0
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Handlebars examples

Maurits van der Schee 8 years ago
parent
d9d51d34da
commit
45de181257
2 changed files with 136 additions and 0 deletions
Split View Show Diff Stats
  1. 67
    0
      examples/client_handlebars.html
  2. 69
    0
      examples/client_handlebars_compiled.html

+ 67
- 0
examples/client_handlebars.html View File 

@@ -0,0 +1,67 @@
1 
+<html>
2 
+<head>
3 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.runtime.js"></script>
4 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
5 
+<script src="../lib/php_crud_api_transform.js"></script>
6 
+<script id="PostListTemplate" type="text/mustache">
7 
+<ul>
8 
+	{{#posts}}
9 
+		<li>
10 
+			<span class="id">{{id}}</span>, <span class="content">{{content}}</span>
11 
+			<a href="javascript:void(0)" class="edit">edit</a>
12 
+			<a href="javascript:void(0)" class="delete">del</a>
13 
+		</li>
14 
+	{{/posts}}
15 
+	<li>
16 
+		<form>
17 
+			<input name="content"/>
18 
+		</form>
19 
+	</li>
20 
+</ul>
21 
+</script>
22 
+<script>
23 
+function PostList(element, template) {
24 
+	var self = this;
25 
+	var url = '../api.php/posts';
26 
+	self.edit = function() {
27 
+		var li = $(this).parent('li');
28 
+		var id = li.find('span.id').text();
29 
+		var content = li.find('span.content').text();
30 
+		content = prompt('Value',content);
31 
+		if (content!==null) {
32 
+			$.ajax({url:url+'/'+id, type: 'PUT', data: {content:content}, success:self.update});
33 
+		}
34 
+	};
35 
+	self.delete = function() {
36 
+		var li = $(this).parent('li');
37 
+		var id = li.find('span.id').text();
38 
+		if (confirm("Deleting #"+id+". Continue?")) {
39 
+			$.ajax({url:url+'/'+id, type: 'DELETE', success:self.update});
40 
+		}
41 
+	};
42 
+	self.submit = function(e) {
43 
+		e.preventDefault();
44 
+		var content = $(this).find('input[name="content"]').val();
45 
+		$.post(url, {user_id:1,category_id:1,content:content}, self.update);
46 
+	};
47 
+	self.render = function(data) {
48 
+		element.html(Handlebars.compile(template.html())(php_crud_api_transform(data)));
49 
+	};
50 
+	self.update = function() {
51 
+		$.get(url, self.render);
52 
+	};
53 
+	self.post = function() {
54 
+		$.post(url, {user_id:1,category_id:1,content:"from mustache"}, self.update);
55 
+	};
56 
+	element.on('submit','form',self.submit);
57 
+	element.on('click','a.edit',self.edit)
58 
+	element.on('click','a.delete',self.delete)
59 
+	self.post();
60 
+};
61 
+$(function(){ new PostList($('#PostListDiv'),$('#PostListTemplate')); });
62 
+</script>
63 
+</head>
64 
+<body>
65 
+<div id="PostListDiv">Loading...</div>
66 
+</body>
67 
+</html>

+ 69
- 0
examples/client_handlebars_compiled.html View File 

@@ -0,0 +1,69 @@
1 
+<html>
2 
+<head>
3 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.runtime.js"></script>
4 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
5 
+<script src="../lib/php_crud_api_transform.js"></script>
6 
+<script>
7 
+var PostListTemplate = {"1":function(container,depth0,helpers,partials,data) {
8 
+    var helper;
9 
+
10 
+  return "		<li>\n			<span class=\"id\">"
11 
+    + 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)))
12 
+    + "</span>, <span class=\"content\">"
13 
+    + 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)))
14 
+    + "</span>\n			<a href=\"javascript:void(0)\" class=\"edit\">edit</a>\n			<a href=\"javascript:void(0)\" class=\"delete\">del</a>\n		</li>\n";
15 
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
16 
+    var stack1, helper, options, buffer =
17 
+  "\n<ul>\n";
18 
+  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));
19 
+  if (!helpers.posts) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
20 
+  if (stack1 != null) { buffer += stack1; }
21 
+  return buffer + "	<li>\n		<form>\n			<input name=\"content\"/>\n		</form>\n	</li>\n</ul>\n";
22 
+},"useData":true}
23 
+</script>
24 
+<script>
25 
+function PostList(element, template) {
26 
+	var self = this;
27 
+	var url = '../api.php/posts';
28 
+	self.edit = function() {
29 
+		var li = $(this).parent('li');
30 
+		var id = li.find('span.id').text();
31 
+		var content = li.find('span.content').text();
32 
+		content = prompt('Value',content);
33 
+		if (content!==null) {
34 
+			$.ajax({url:url+'/'+id, type: 'PUT', data: {content:content}, success:self.update});
35 
+		}
36 
+	};
37 
+	self.delete = function() {
38 
+		var li = $(this).parent('li');
39 
+		var id = li.find('span.id').text();
40 
+		if (confirm("Deleting #"+id+". Continue?")) {
41 
+			$.ajax({url:url+'/'+id, type: 'DELETE', success:self.update});
42 
+		}
43 
+	};
44 
+	self.submit = function(e) {
45 
+		e.preventDefault();
46 
+		var content = $(this).find('input[name="content"]').val();
47 
+		$.post(url, {user_id:1,category_id:1,content:content}, self.update);
48 
+	};
49 
+	self.render = function(data) {
50 
+		element.html(Handlebars.template(PostListTemplate)(php_crud_api_transform(data)));
51 
+	};
52 
+	self.update = function() {
53 
+		$.get(url, self.render);
54 
+	};
55 
+	self.post = function() {
56 
+		$.post(url, {user_id:1,category_id:1,content:"from mustache"}, self.update);
57 
+	};
58 
+	element.on('submit','form',self.submit);
59 
+	element.on('click','a.edit',self.edit)
60 
+	element.on('click','a.delete',self.delete)
61 
+	self.post();
62 
+};
63 
+$(function(){ new PostList($('#PostListDiv'),$('#PostListTemplate')); });
64 
+</script>
65 
+</head>
66 
+<body>
67 
+<div id="PostListDiv">Loading...</div>
68 
+</body>
69 
+</html>

Write Preview
Loading…
Cancel
Save