Merge pull request #21 from janhommes/v0.2.1

V0.2.1
janhommes · Mar 1, 2016 · 7035ee3 · 7035ee3
2 parents 2e875ee + 8e59a75
commit 7035ee3
Show file tree

Hide file tree

Showing 7 changed files with 1,569 additions and 1,494 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # o.js
-*o.js beta v0.2.0*
+*o.js beta v0.2.1*
 
 o.js is a client side Odata Javascript library to simplify the request of data. The main goal is to build a **standalone, lightweight and easy** to understand Odata lib.
 
@@ -15,12 +15,12 @@ You can use o.js in node.js as well:
 ```
 	npm install o.js
 
-    //var o = require('o.js');
+    var o = require('o.js');
 ```
 
 ## Samples ##
 ------------
-For alle samples we are using the test odata service from <a href="http://www.odata.org">Odata.org</a>. You can find the metadata of this service <a href="http://services.odata.org/V4/OData/OData.svc">here</a>.
+For all samples we are using the test odata service from <a href="http://www.odata.org">Odata.org</a>. You can find the metadata of this service <a href="http://services.odata.org/V4/OData/OData.svc">here</a>.
 
 ### Simple Odata query with o.js ###
 ----------------------
@@ -29,7 +29,7 @@ For alle samples we are using the test odata service from <a href="http://www.od
   		console.log(data); //returns an array of Product data
   });
 ```
-o.js uses a jQuery like syntax to determine which resource you want to access. You can define any Odata service url (or any json web service) in the o-function: `o('<your odata service resource>')`. This only holds a handler to this resource and dosn't start the ajax call. If you want to get the resource, you need to call `.get()`. Get accepts a function callback which contains the data as the first parameter.
+o.js uses a jQuery like syntax to determine which resource you want to access. You can define any Odata service url (or any json web service) in the o-function: `o('<your odata service resource>')`. This only holds a handler to this resource and doesn't start the ajax call. If you want to get the resource, you need to call `.get()`. Get accepts a function callback which contains the data as the first parameter.
 
 ### Methods ###
 --------
@@ -69,7 +69,7 @@ oHandler.get(function(data) {
 });
 ```
 
-If you need to get several data you can use promise. Currently o.js only suports [q.js](https://github.com/kriskowal/q). The following example show how you can get the data of two differend resources:
+If you need to get several data you can use promise. Currently o.js only supports [q.js](https://github.com/kriskowal/q). The following example show how you can get the data of two different resources:
 ```js
 Q.all([
 	o('http://services.odata.org/V4/OData/OData.svc/Products(4)').get(),
@@ -92,7 +92,7 @@ o('http://services.odata.org/V4/OData/OData.svc/Products(2)').get().then(functio
 
 ## Add and change data ##
 ---------
-To add and change data you can use the http verb in kombination with the `save()` method:
+To add and change data you can use the http verb in combination with the `save()` method:
 
 ### Post: ###
 ---------
@@ -144,7 +144,7 @@ o('http://services.odata.org/V4/OData/OData.svc/Products').find(2).get().then(fu
 
 ### Endpoint configuration ###
 ---------
-You can configure a endpoint with the `o().config()` function. This config is persistent over all off your o.js calls. Example:
+You can configure a endpoint with the `o().config()` function. This configuration is persistent over all off your o.js calls. Example:
 ```js
   // set an endpoint
   o().config({
@@ -187,15 +187,15 @@ Currently the following queries are supported:
 
  `.first()`		- returns the first object which is found (Odata: Products/?*$top=1*)
 
- `.filter(string)`	- adds a filter string (o.js can convered simple JS-Syntax. If you need something complex use the plain Odata $filter syntax: [see the Odata doc](http://www.odata.org/documentation/odata-version-3-0/url-conventions/) for more information) (Odata: Products/?*$filter=Name eq 'Example'*)  - Synonym: `.where`
+ `.filter(string)`	- adds a filter string (o.js can converted simple JS-Syntax. If you need something complex use the plain Odata $filter syntax: [see the Odata doc](http://www.odata.org/documentation/odata-version-3-0/url-conventions/) for more information) (Odata: Products/?*$filter=Name eq 'Example'*)  - Synonym: `.where`
 
  `.any(string, string)` - applies an any filter to an resource (Odata: Products/?*$filter=Categories/any(x:x/Name eq 'Test')*)
 
- `.search(array, string)` - builds up a search $filter. The first parameter defines the columns to search in the second the searchword (e.g.: `.search(['Name', 'Description'], 'Test')`)
+ `.search(array, string)` - builds up a search $filter. The first parameter defines the columns to search in the second the search word (e.g.: `.search(['Name', 'Description'], 'Test')`)
 
- `.orderBy(string)`	- orders the data (Odata: Products/?*$orderBy=Name*)
+ `.orderBy(string, direction)`	- orders the data (Odata: Products/?*$orderBy=Name*)
 
- `.orderByDesc(string)`	- orders the data descading (Odata: Products/?*$orderBy=Name*)
+ `.orderByDesc(string)`	- orders the data descending (Odata: Products/?*$orderBy=Name*)
 
  `.count()` 		- only counts the result (Odata: Products/*$count*)
 

diff --git a/example/app.js b/example/app.js
@@ -4,73 +4,74 @@
 // An example for o.js.
 //
 // By Jan Hommes
-// Date: 15.06.2015
+// Date: 01.03.2016
 // +++
 
 //knockout view model
 function ViewModel() {
-	var self=this;
+    var self = this;
 
-	//ko observables
-	self.People=ko.observableArray([]);
-	//self.currentPeople=ko.observable(null);
-	self.route=ko.observable('');
-	self.skip=ko.observable(0);
-	self.total=ko.observable(0);
-	self.detailPeople=ko.observable();
-	self.isLoading=ko.observable(false);
+    //ko observables
+    self.People = ko.observableArray([]);
+    //self.currentPeople=ko.observable(null);
+    self.route = ko.observable('');
+    self.skip = ko.observable(0);
+    self.total = ko.observable(0);
+    self.detailPeople = ko.observable();
+    self.isLoading = ko.observable(false);
 
-	self.remove = function(d) {
-		o('People(\'' + self.detailPeople().UserName + '\')/Trips(' + d.TripId + ')').remove().save(function() {
-			o('People(\'' + self.detailPeople().UserName + '\')').expand('Trips').get(function(d) {
-				self.detailPeople(d);
-			});
-		});
-	}
+    self.remove = function (d) {
+        o('People(\'' + self.detailPeople().UserName + '\')/Trips(' + d.TripId + ')').remove().save(function () {
+            o('People(\'' + self.detailPeople().UserName + '\')').expand('Trips').get(function (d) {
+                self.detailPeople(d);
+            });
+        });
+    }
 
-	//o.js init
-	o().config({
-		endpoint:'http://services.odata.org/V4/%28S%28wptr35qf3bz4kb5oatn432ul%29%29/TripPinServiceRW/',
-		version:4,
-		strictMode:true,
-		start:function() {
-			self.isLoading(true);
-		},
-		ready:function() {
-			self.isLoading(false);
-		}
-	});
+    //o.js init
+    o().config({
+        endpoint: 'http://services.odata.org/V4/%28S%28wptr35qf3bz4kb5oatn432ul%29%29/TripPinServiceRW/',
+        version: 4,
+        strictMode: true,
+        start: function () {
+            self.isLoading(true);
+        },
+        ready: function () {
+            self.isLoading(false);
+        },
+        headers: [{ name: 'If-Match', value: '*' }]
+    });
 
 
-	//+++ initialize the routes +++
+    //+++ initialize the routes +++
 
-	//get top 3 People on start TODO: At filter for best selling!
-	o('People').take(3).route('Home', function(data) {
-		self.route('Home');
-		self.People(data);
-	}).triggerRoute(window.location.hash === '' ? '#Home' : window.location.hash);
+    //get top 3 People on start TODO: At filter for best selling!
+    o('People').take(3).route('Home', function (data) {
+        self.route('Home');
+        self.People(data);
+    }).triggerRoute(window.location.hash === '' ? '#Home' : window.location.hash);
 
-	//get a People list on People click
-	o('People').take(9).inlineCount().route('People', function(data) {
-		self.route('People');
-		self.People(data);
-		self.skip(0);
-		self.total(this.inlinecount);
-	});
+    //get a People list on People click
+    o('People').take(9).inlineCount().route('People', function (data) {
+        self.route('People');
+        self.People(data);
+        self.skip(0);
+        self.total(this.inlinecount);
+    });
 
-	//People pagination
-	o('People').skip(':0').take(9).inlineCount().route('People/Page/:0', function(data) {
-		self.skip(parseInt(this.param[0]));
-		self.route('People');
-		self.People(data);
-		self.total(this.inlinecount);
-	});
+    //People pagination
+    o('People').skip(':0').take(9).inlineCount().route('People/Page/:0', function (data) {
+        self.skip(parseInt(this.param[0]));
+        self.route('People');
+        self.People(data);
+        self.total(this.inlinecount);
+    });
 
-	//People detail
-	o('People').filter('UserName == \':0\'').expand('Trips').first().route('People/Detail/:0', function(data) {
-		self.route('Detail');
-		self.detailPeople(data);
-	});
+    //People detail
+    o('People').filter('UserName == \':0\'').expand('Trips').first().route('People/Detail/:0', function (data) {
+        self.route('Detail');
+        self.detailPeople(data);
+    });
 }
 
 //append the viewmodel

diff --git a/example/index.html b/example/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,80 +13,81 @@
 
     <!-- Bootstrap core CSS -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
-	<link href="css/custom.css" rel="stylesheet">
+    <link href="css/custom.css" rel="stylesheet">
 
-  </head>
+</head>
 
-  <body>
+<body>
 
     <div class="container">
-      <div class="header">
-        <nav>
-          <ul class="nav nav-pills pull-right">
-            <li role="presentation" data-bind="css: { active: route()==='Home' }" class="active"><a href="#Home">Home</a></li>
-            <li role="presentation" data-bind="css: { active: route()==='People' }"><a href="#People">People</a></li>
-          </ul>
-        </nav>
-        <h3 class="text-muted">o.js Example</h3>
-      </div>
-
-	  <div class="loading" data-bind="visible:isLoading()"> 
-		  <div class="jumbotron" >
-			<img src="img/ajax-loader.gif" alt="Loading ...">
-			<p>Loading ...</p>
-		  </div>
-	  </div>
-
-	  <div class="spacer" data-bind="css: { opacity20: isLoading()}">
-		  <div class="jumbotron" data-bind="visible:route()==='Home'">
-			<h1>o.js Example</h1>
-			<p class="lead">This example shows how easy you can use o.js routing function in combination with knockout and bootstrap to make a SPA webpage.</p>
-			<p> <a class="btn btn-lg btn-success" href="https://github.com/janhommes/o.js" role="button">Get o.js</a></p>
-		  </div>
-
-		  <div data-bind="visible:route()==='Detail',with:detailPeople">
-			  <div class="jumbotron">
-			<h1 data-bind="text:FirstName + ' ' + LastName "></h1>
-			  </div>
-
-			<table class="table table-hover">
-				  <thead>
-					<tr>
-					  <th>#</th>
-					  <th>Name</th>
-					  <th>Description</th>
-					  <th></th>
-					  <th class="text-center">Budget</th>
-					</tr>
-				  </thead>
-				  <tbody>
-					<!-- ko foreach: Trips -->
-					<tr>
-						<td data-bind="text:($index()+1)"></td>
-						<td data-bind="text:Name"></td>
-						<td data-bind="text:Description"></td>
-						<td style="width:100px;" class="text-right" data-bind="currency:Budget"></td>
-						<td style="width:20%;vertical-align:middle; " class="text-center">
-							<a role="button" class="btn btn-danger" data-bind="click:$root.remove">x</a>
-						</td>
-					</tr>
-					<!-- /ko -->
-				  </tbody>
-				</table>
-		  </div>
-
-		  <div class="row marketing" data-bind="visible:route()==='Home'">
-			<!-- ko foreach: People -->
-				<div class="col-md-4">
-					<div class="people">
-						<h4 data-bind="text:FirstName"></h4>
-						<h2 data-bind="text:LastName"></h4>
+        <div class="header">
+            <nav>
+                <ul class="nav nav-pills pull-right">
+                    <li role="presentation" data-bind="css: { active: route()==='Home' }" class="active"><a href="#Home">Home</a></li>
+                    <li role="presentation" data-bind="css: { active: route()==='People' }"><a href="#People">People</a></li>
+                </ul>
+            </nav>
+            <h3 class="text-muted">o.js Example</h3>
+        </div>
+
+        <div class="loading" data-bind="visible:isLoading()">
+            <div class="jumbotron">
+                <img src="img/ajax-loader.gif" alt="Loading ...">
+                <p>Loading ...</p>
+            </div>
+        </div>
+
+        <div class="spacer" data-bind="css: { opacity20: isLoading()}">
+            <div class="jumbotron" data-bind="visible:route()==='Home'">
+                <h1>o.js Example</h1>
+                <p class="lead">This example shows how easy you can use o.js routing function in combination with knockout and bootstrap
+                    to make a SPA webpage.</p>
+                <p> <a class="btn btn-lg btn-success" href="https://github.com/janhommes/o.js" role="button">Get o.js</a></p>
+            </div>
+
+            <div data-bind="visible:route()==='Detail',with:detailPeople">
+                <div class="jumbotron">
+                    <h1 data-bind="text:FirstName + ' ' + LastName "></h1>
+                </div>
+
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Name</th>
+                            <th>Description</th>
+                            <th></th>
+                            <th class="text-center">Budget</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- ko foreach: Trips -->
+                        <tr>
+                            <td data-bind="text:($index()+1)"></td>
+                            <td data-bind="text:Name"></td>
+                            <td data-bind="text:Description"></td>
+                            <td style="width:100px;" class="text-right" data-bind="currency:Budget"></td>
+                            <td style="width:20%;vertical-align:middle; " class="text-center">
+                                <a role="button" class="btn btn-danger" data-bind="click:$root.remove">x</a>
+                            </td>
+                        </tr>
+                        <!-- /ko -->
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="row marketing" data-bind="visible:route()==='Home'">
+                <!-- ko foreach: People -->
+                <div class="col-md-4">
+                    <div class="people">
+                        <h4 data-bind="text:FirstName"></h4>
+                        <h2 data-bind="text:LastName"></h4>
 						<a role="button" class="btn btn-primary" data-bind="attr { href:'#People/Detail/'+UserName }">Details</a>
 					</div>
 				</div>
 			<!-- /ko -->
 		  </div>
-		  
+
 		  <div class="row marketing" data-bind="visible:route()==='People'">
 			<!-- ko foreach: People -->
 				<div class="col-md-4">
@@ -97,7 +99,7 @@ <h2 data-bind="text:LastName"></h4>
 				</div>
 			<!-- /ko -->
 		  </div>
-		  
+
 		 <div class="row marketing" data-bind="visible:route()==='People'">
 			<div class="col-md-4">
 				<a data-bind="attr: { href: '#People/Page/'+(skip()-9) },visible:skip()>0" class="btn btn-default" role="button">Prev</a>
@@ -128,4 +130,4 @@ <h2 data-bind="text:LastName"></h4>
 	<script src="js/ko.bindinghandler.currency.js"></script>
 	<script src="app.js"></script>
   </body>
-</html>
+</html>