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

Updated examples

Browse source
This commit is contained in:
Maurits van der Schee 2016-04-08 21:01:30 +02:00
commit b6c155a199
4 changed files with 33 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

9
examples/client_angular.html
View file

@ -5,10 +5,11 @@
<script> <script>
var app = angular.module('myApplication', []); var app = angular.module('myApplication', []);
app.controller('postController', function($scope, $http) { app.controller('postController', function($scope, $http) {
var url = 'http://localhost/api.php/posts'; var url = '../api.php/posts';
$http.post(url,{user_id:1,category_id:1,content:"from angular"}); $http.post(url,{user_id:1,category_id:1,content:"from angular"}).success(function(){
$http.get(url).success(function(res){ $http.get(url).success(function(response){
$scope.posts = php_crud_api_transform(res).posts; $scope.posts = php_crud_api_transform(response).posts;
});
}); });
}); });
</script> </script>

2
examples/client_angular2.html
View file

@ -14,7 +14,7 @@ AppComponent =
.Class({ .Class({
constructor: [ constructor: [
ng.http.Http, function(http) { ng.http.Http, function(http) {
var url = "http://localhost/api.php/posts"; var url = "../api.php/posts";
http.post(url,JSON.stringify({user_id:1,category_id:1,content:"from angular2"})).subscribe(); http.post(url,JSON.stringify({user_id:1,category_id:1,content:"from angular2"})).subscribe();
http.get(url).map(res => php_crud_api_transform(res.json())).subscribe(res => this.posts = res.posts); http.get(url).map(res => php_crud_api_transform(res.json())).subscribe(res => this.posts = res.posts);
} }

23
examples/client_knockout.html
View file

@ -4,13 +4,26 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.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 src="../lib/php_crud_api_transform.js"></script>
<script> <script>
$(function(){ var url = '../api.php/posts';
var url = 'http://localhost/api.php/posts'; function PostList(){
$.post(url, {user_id:1,category_id:1,content:"from knockout"}); var self = this;
self.posts = ko.observableArray([]);
self.set = function(array) {
self.posts.removeAll();
for (i=0;i<array.length;i++) {
self.posts.push(array[i]);
}
};
self.update = function() {
$.get(url, function(data) { $.get(url, function(data) {
$('#myApplication').html('<ul data-bind="foreach: posts"><li><span data-bind="text: id"></span>, <span data-bind="text: content"></span></li></ul>') self.set(php_crud_api_transform(data).posts);
ko.applyBindings(php_crud_api_transform(data),$('#myApplication')[0]);
}); });
};
$.post(url, {user_id:1,category_id:1,content:"from knockout"}, self.update.bind(self));
};
$(function(){
$('#myApplication').html('<ul data-bind="foreach: posts"><li><span data-bind="text: id"></span>, <span data-bind="text: content"></span></li></ul>');
ko.applyBindings(new PostList(),$('#myApplication')[0]);
}); });
</script> </script>
</head> </head>

16
examples/client_react.html
View file

@ -5,27 +5,23 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.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 src="../lib/php_crud_api_transform.js"></script>
<script> <script>
'use strict';
var PostList = React.createClass({ var PostList = React.createClass({
displayName: 'PostList', displayName: 'PostList',
url: 'http://localhost/api.php/posts', url: '../api.php/posts',
getInitialState: function() {
getInitialState: function getInitialState() {
return { posts: [] }; return { posts: [] };
}, },
retrieveServerState: function() {
componentDidMount: function() {
$.post(this.url, {user_id:1,category_id:1,content:"from react"});
this.serverRequest = $.get(this.url, function (data) { this.serverRequest = $.get(this.url, function (data) {
this.setState(php_crud_api_transform(data)); this.setState(php_crud_api_transform(data));
}.bind(this)); }.bind(this));
}, },
componentDidMount: function() {
$.post(this.url, {user_id:1,category_id:1,content:"from react"}, this.retrieveServerState);
},
componentWillUnmount: function() { componentWillUnmount: function() {
this.serverRequest.abort(); this.serverRequest.abort();
}, },
render: function render() { render: function render() {
var createPost = function(post) { var createPost = function(post) {
return React.createElement( return React.createElement(