Skip to content

Instantly share code, notes, and snippets.

@jordoh

jordoh/Index.html

Created January 11, 2012 22:01
Show Gist options
  • Save jordoh/1597020 to your computer and use it in GitHub Desktop.
Save jordoh/1597020 to your computer and use it in GitHub Desktop.
Download ZIP
knockout.js
Raw
app.js
function ParagraphsModel() {
// Data
var self = this;
self.page = ko.observable(1);
self.pageData = ko.mapping.fromJS({ pages: 0, paragraphs: [] });
self.goToNextPage = function () {
self.goToPage(parseInt(self.page()) + 1);
};
self.goToPrevPage = function () {
self.goToPage(parseInt(self.page()) - 1);
};
self.goToPage = function (page) {
location.hash = Math.max(1, Math.min(page, self.pageData.pages()));
};
// Client-side routes
Sammy(function () {
this.get('#:page', function () {
self.page(this.params.page);
$.get("/paragraphs", { page: self.page() }, function (data) { ko.mapping.fromJS(data, self.pageData); });
});
this.get('', function () { this.app.runRoute('get', '#' + self.page()) });
}).run();
};
$(function () { ko.applyBindings(new ParagraphsModel()); });
Raw
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Paragraphs</title>
<link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/humanity/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="/Content/Stylesheets/Main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="/Content/Scripts/knockout.js" type="text/javascript"></script>
<script src="/Content/Scripts/knockout.mapping.js" type="text/javascript"></script>
<script src="/Content/Scripts/sammy/sammy.js" type="text/javascript"></script>
<script src="/Content/Scripts/app.js" type="text/javascript"></script>
</head>
<body>
<h1>WhiteNights.db</h1>
<div>
<span data-bind="ifnot: page() > 1">
<span>Prev</span>
<span>1</span>
</span>
<span data-bind="if: page() > 1">
<a href="#" data-bind="click: goToPrevPage">Prev</a>
<a href="#" data-bind="click: function() { goToPage(1); }">1</a>
</span>
<span>...</span>
<span data-bind="text: page">0</span>
<span>...</span>
<span data-bind="ifnot: page() < pageData.pages()">
<span data-bind="text: pageData.pages"></span>
<span>Next</span>
</span>
<span data-bind="if: page() < pageData.pages()">
<a href="#" data-bind="text: pageData.pages, click: function() { goToPage(pageData.pages()); }"></a>
<a href="#" data-bind="click: goToNextPage">Next</a>
</span>
</div>
<hr />
<table class="paragraphs" data-bind="with: pageData">
<thead>
<tr>
<th>English Text</th>
<th>Foreign Text</th>
</tr>
</thead>
<tbody data-bind="foreach: paragraphs">
<tr>
<td data-bind="text: EnglishText"></td>
<td data-bind="text: ForeignText"></td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment