odata
Version:
o.js is a isomorphic Odata Javascript library to simplify the request of data. The main goal is to build a standalone, lightweight and easy to understand Odata lib.
130 lines (114 loc) • 5.18 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>o.js example page</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<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 you can use o.js in a browser.</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">
<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'">
<div class="col-xs-4">
<a data-bind="attr: { href: '#People/Page/'+(skip()-6) },visible:skip()>0" class="btn btn-default" role="button">Prev</a>
</div>
<div class="col-xs-4 text-center">
<span data-bind="text:Math.ceil((skip()/6)+1)"></span> of <span data-bind="text:Math.ceil(total()/6)"></span>
</div>
<div class="col-xs-4">
<a data-bind="attr: { href: '#People/Page/'+(skip()+6) },visible:(skip()+6)<total()" class="btn btn-default pull-right" role="button">Next</a>
</div>
</div>
</div>
<footer class="footer">
<p>© Company 2023</p>
</footer>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/q.js"></script>
<!--<script src="https://unpkg.com/odata@2.0.0/dist/umd/o.polyfill.js"></script>-->
<script src="https://unpkg.com/odata@2.0.1/dist/umd/o.min.js"></script>
<!--<script src="../dist/umd/o.min.js"></script>-->
<script src="js/knockout-3.2.0.js"></script>
<script src="js/ko.bindinghandler.currency.js"></script>
<script src="browser.js"></script>
</body>
</html>