Skip to content

Instantly share code, notes, and snippets.

@codebycliff
Created September 26, 2013 01:59
Show Gist options
  • Save codebycliff/6708846 to your computer and use it in GitHub Desktop.
Save codebycliff/6708846 to your computer and use it in GitHub Desktop.
Knockout example using node.js (express)
<!DOCTYPE html>
<html>
<head>
<title><%= "Dynamic Dispatch" %></title>
<link rel='stylesheet' href='/stylesheets/application.css' />
<script src='/components/jquery/jquery.min.js' type='text/javascript'></script>
<script src='/components/knockout/knockout.js' type='text/javascript'></script>
<script type='text/javascript'>
function GithubProjectViewModel() {
var self = this;
self.latest_commit = ko.observable(null);
self.latest_sha = ko.observable(null);
self.commit_author = ko.observable(null);
self.commit_author_email = ko.observable(null);
self.last_updated = ko.observable();
self.update = function(callback) {
console.log('updating');
$.getJSON('/latest_commit', function(result) {
var latest = result.latest_commit;
self.latest_commit(latest);
self.latest_sha(latest.sha);
self.commit_author(latest.commit.author.name);
self.commit_author_email(latest.commit.author.email);
self.last_updated(new Date());
if(callback && typeof(callback) === "function") {
callback();
}
});
};
self.watch = function(timeout) {
if(!timeout) timeout = 5000;
self.update(function() {
setTimeout(self.watch, 5000);
});
};
};
$(function() {
ko.applyBindings(new GithubProjectViewModel());
});
</script>
</head>
<body>
<div style="border: solid black 1px; padding: 10px;">
<h1>Github</h1>
<hr/>
<div> <strong>Latest commit:</strong><i data-bind="text: latest_sha"></i></div><br/>
<div> <strong>Author:</strong> <i data-bind="text: commit_author"></i></div><br/>
<div> <strong>Email:</strong> <a data-bind="attr: { href: 'mailto:'+commit_author_email }, text: commit_author_email"></a></div> <br/>
<div> <strong>Updated:</strong> <i data-bind="text: last_updated"></i></div>
</div>
<br/>
<button data-bind="click: update">Update</button>
<button data-bind="click: watch">Watch</button>
</body>
</html>
var express = require('express'),
http = require('http'),
path = require('path'),
underscore = require('underscore'),
moment = require('moment'),
github = require('octonode');
var app = module.exports = express();
app.set('port', process.env.PORT || 9000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
if ('development' === app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', function(req,res) {
res.render('index');
});
app.get('/latest_commit', function(req,res) {
var githubClient = github.client('21dabb910e6f62ee2ed9c52686d67fbfbed80d68');
var repo = githubClient.repo('bruschill/dynamic-dispatch');
var result = {
latest_commit: null,
contributors: []
};
repo.commits(function(err, data) {
if(!err) {
result.latest_commit = underscore.first(data);
res.send(result);
}
});
});
app.listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment