define('ajax', function (exports, require, module) { var apiUrl = 'https://api.github.com/repos/zhang-ning/RiverJS/commits?per_page=3&sha='; function get(branch) { var xhr = new XMLHttpRequest() xhr.open('GET', apiUrl + branch) xhr.onload = function () { exports.commits = JSON.parse(xhr.responseText); exports.apply(); } xhr.send() } exports.changeToMaster = function () { get('master'); } exports.changeToDev = function () { get('dev'); } get('master'); }) define('river.grammer.filter', function (exports, require, module) { exports = module.exports = function (str, scope, element) { var time = new Date(scope.commit.commit.author.date); element.querySelector('.date').innerHTML = time.toLocaleString(); element.querySelector('a').innerHTML = scope.commit.sha.slice(0, 5); }; });
<div id="demo" scope="ajax"> <h1>Latest River.js Commits</h1> <input type="radio" id="master" name="branch" checked value="master" jclick="changeToMaster"> <label for="master">master</label> <br> <input type="radio" id="dev" name="branch" value="dev" jclick="changeToDev"> <label for="dev">dev</label> <ul> <li repeat="commit in commits" filter> <a href="{{html_url}}" target="_blank" class="commit">{{commit.sha}}</a> - <span class="message">{{commit.commit.message}}</span> <br>by <span class="author">{{commit.commit.author.name}}</span> at <span class="date">{{commit.commit.author.date}}</span> </li> </ul> </div>
#demo { font-family:'Helvetica', Arial, sans-serif; font-size: 13px; padding-left: 15px; } a { text-decoration: none; color: #f66; } li { line-height: 1.5em; margin-bottom: 20px; } .author, .date { font-weight: bold; }