Browse Source

Updated examples

Maurits van der Schee 8 years ago
parent
commit
b6c155a199

+ 5
- 4
examples/client_angular.html View File

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

+ 1
- 1
examples/client_angular2.html View File

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

+ 20
- 7
examples/client_knockout.html View File

@@ -4,13 +4,26 @@
4 4
 <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
5 5
 <script src="../lib/php_crud_api_transform.js"></script>
6 6
 <script>
7
-$(function(){ 
8
-	var url = 'http://localhost/api.php/posts';
9
-	$.post(url, {user_id:1,category_id:1,content:"from knockout"});
10
-	$.get(url, function(data) {
11
-		$('#myApplication').html('<ul data-bind="foreach: posts"><li><span data-bind="text: id"></span>, <span data-bind="text: content"></span></li></ul>')
12
-		ko.applyBindings(php_crud_api_transform(data),$('#myApplication')[0]);
13
-	});	
7
+var url = '../api.php/posts';
8
+function PostList(){
9
+	var self = this;
10
+	self.posts = ko.observableArray([]);
11
+	self.set = function(array) {
12
+		self.posts.removeAll();
13
+		for (i=0;i<array.length;i++) {
14
+    	self.posts.push(array[i]);
15
+		}
16
+	};
17
+	self.update = function() {
18
+		$.get(url, function(data) {
19
+			self.set(php_crud_api_transform(data).posts);
20
+		});
21
+	};
22
+	$.post(url, {user_id:1,category_id:1,content:"from knockout"}, self.update.bind(self));
23
+};
24
+$(function(){
25
+	$('#myApplication').html('<ul data-bind="foreach: posts"><li><span data-bind="text: id"></span>, <span data-bind="text: content"></span></li></ul>');
26
+	ko.applyBindings(new PostList(),$('#myApplication')[0]);
14 27
 });
15 28
 </script>
16 29
 </head>

+ 7
- 11
examples/client_react.html View File

@@ -5,27 +5,23 @@
5 5
 <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
6 6
 <script src="../lib/php_crud_api_transform.js"></script>
7 7
 <script>
8
-'use strict';
9
-
10 8
 var PostList = React.createClass({
11 9
   displayName: 'PostList',
12
-  url: 'http://localhost/api.php/posts',
13
-
14
-  getInitialState: function getInitialState() {
10
+  url: '../api.php/posts',
11
+  getInitialState: function() {
15 12
     return { posts: [] };
16 13
   },
17
-  
18
-  componentDidMount: function() {
19
-    $.post(this.url, {user_id:1,category_id:1,content:"from react"});
20
-	this.serverRequest = $.get(this.url, function (data) {
14
+  retrieveServerState: function() {
15
+    this.serverRequest = $.get(this.url, function (data) {
21 16
       this.setState(php_crud_api_transform(data));
22 17
     }.bind(this));
23 18
   },
24
-
19
+  componentDidMount: function() {
20
+    $.post(this.url, {user_id:1,category_id:1,content:"from react"}, this.retrieveServerState);
21
+  },
25 22
   componentWillUnmount: function() {
26 23
     this.serverRequest.abort();
27 24
   },
28
-  
29 25
   render: function render() {
30 26
     var createPost = function(post) {
31 27
       return React.createElement(

Loading…
Cancel
Save