Skip to content

Commit 3c81bc2

Browse files
mevdscheemevdschee
committed
Add client examples
1 parent 4b5ee40 commit 3c81bc2

10 files changed

+669
-0
lines changed

‎examples/client.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html>
2+
<head>
3+
<script>
4+
var xhttp = new XMLHttpRequest();
5+
xhttp.onreadystatechange = function() {
6+
if (this.readyState == 4 && this.status == 200) {
7+
console.log(this.responseText);
8+
jsonObject = JSON.parse(this.responseText);
9+
document.getElementById('output').innerHTML = JSON.stringify(jsonObject, undefined, 4);
10+
}
11+
};
12+
xhttp.open("GET", "http://localhost/api.php/records/posts?join=categories,tags,comments&filter=id,eq,1", true);
13+
xhttp.send();
14+
</script>
15+
</head>
16+
<body>
17+
<pre id="output"></pre>
18+
</body>
19+
</html>
20+

‎examples/client_angular.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html>
2+
<head>
3+
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
4+
<script>
5+
var app = angular.module('myApplication', []);
6+
app.controller('postController', function($scope, $http) {
7+
var url = '/api.php/records/posts';
8+
$http.post(url, {user_id: 1, category_id: 1, content: "from angular"}).success(function() {
9+
$http.get(url).success(function(response) {
10+
$scope.posts = response.records;
11+
});
12+
});
13+
});
14+
</script>
15+
</head>
16+
<body>
17+
<div ng-app="myApplication" ng-controller="postController">
18+
<ul>
19+
<li ng-repeat="x in posts">{{ x.id + ', ' + x.content }}</li>
20+
</ul>
21+
</div>
22+
</body>
23+
</html>
24+

‎examples/client_angular2.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<html>
2+
<head>
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.14/angular2-polyfills.min.js"></script>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.14/Rx.umd.min.js"></script>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.14/angular2-all.umd.min.js"></script>
6+
<script>
7+
AppComponent =
8+
ng.core.Component({
9+
selector: 'my-app',
10+
providers: [ng.http.HTTP_PROVIDERS],
11+
template: '<ul><li *ngFor="#x of posts">{{ x.id + ", " + x.content }}</li></ul>'
12+
})
13+
.Class({
14+
constructor: [
15+
ng.http.Http, function(http) {
16+
var url = "/api.php/records/posts";
17+
http.post(url,JSON.stringify({user_id:1,category_id:1,content:"from angular2"})).subscribe();
18+
http.get(url).map(res => res.json()).subscribe(res => this.posts = res.records);
19+
}
20+
]
21+
});
22+
document.addEventListener("DOMContentLoaded", function(event) {
23+
ng.core.enableProdMode();
24+
ng.platform.browser.bootstrap(AppComponent);
25+
});
26+
</script>
27+
</head>
28+
<body>
29+
<my-app>Loading...</my-app>
30+
</body>
31+
</html>

‎examples/client_handlebars.html

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

‎examples/client_knockout.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<html>
2+
<head>
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
5+
<script id="posts-template" type="text/html">
6+
<ul>
7+
<!-- ko foreach: posts -->
8+
<li>
9+
<span data-bind="text: id"></span>, <span data-bind="text: content"></span>
10+
<a href="javascript:void(0)" data-bind="click: $parent.edit">edit</a>
11+
<a href="javascript:void(0)" data-bind="click: $parent.delete">del</a>
12+
</li>
13+
<!-- /ko -->
14+
<li>
15+
<form data-bind="submit: submit">
16+
<input name="content" data-bind="value: form"/>
17+
</form>
18+
</li>
19+
</ul>
20+
</script>
21+
<script>
22+
var url = '/api.php/records/posts';
23+
function Post(id,content){
24+
var self = this;
25+
self.id = ko.observable(id);
26+
self.content = ko.observable(content);
27+
}
28+
function PostList(){
29+
var self = this;
30+
self.posts = ko.observableArray([]);
31+
self.form = ko.observable('');
32+
self.bound = false;
33+
self.edit = function(post) {
34+
var content = prompt('Value',post.content());
35+
if (content!==null) {
36+
$.ajax({url:url+'/'+post.id(), type: 'PUT', data: {content:content}, success:self.update});
37+
}
38+
};
39+
self.delete = function(post) {
40+
if (confirm("Deleting #"+post.id()+". Continue?")) {
41+
$.ajax({url:url+'/'+post.id(), type: 'DELETE', success:self.update});
42+
}
43+
};
44+
self.submit = function(form) {
45+
$.post(url, {user_id:1,category_id:1,content:self.form()}, self.update);
46+
};
47+
self.render = function(data) {
48+
var array = data.records;
49+
self.posts.removeAll();
50+
for (i=0;i<array.length;i++) {
51+
self.posts.push(new Post(array[i].id,array[i].content));
52+
}
53+
self.form('');
54+
if (!self.bound){ ko.applyBindings(self); self.bound = true; }
55+
};
56+
self.update = function() {
57+
$.get(url, self.render);
58+
};
59+
self.post = function() {
60+
$.post(url, {user_id:1,category_id:1,content:"from knockout"}, self.update);
61+
}
62+
self.post();
63+
};
64+
$(function(){ new PostList(); });
65+
</script>
66+
</head>
67+
<body>
68+
<div data-bind="template: { name: 'posts-template'}">Loading...</div>
69+
</body>
70+
</html>

‎examples/client_mustache.html

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

‎examples/client_react.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<html>
2+
<head>
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
6+
<script>
7+
var PostList = React.createClass({
8+
displayName: 'PostList',
9+
url: '/api.php/records/posts',
10+
getInitialState: function() {
11+
return { records: [] };
12+
},
13+
retrieveServerState: function() {
14+
this.serverRequest = $.get(this.url, function (data) {
15+
this.setState(data);
16+
}.bind(this));
17+
},
18+
componentDidMount: function() {
19+
$.post(this.url, {user_id:1,category_id:1,content:"from react"}, this.retrieveServerState);
20+
},
21+
componentWillUnmount: function() {
22+
this.serverRequest.abort();
23+
},
24+
render: function render() {
25+
var createPost = function(post) {
26+
return React.createElement(
27+
'li',
28+
{key: post.id},
29+
post.id,
30+
', ',
31+
post.content
32+
);
33+
};
34+
return React.createElement(
35+
'ul',
36+
null,
37+
this.state.records.map(createPost)
38+
);
39+
}
40+
});
41+
$(function(){ ReactDOM.render(React.createElement(PostList, null), document.getElementById('myApplication')); });
42+
</script>
43+
</head>
44+
<body>
45+
<div id="myApplication">Loading...</div>
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)