Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
First application with Mithril
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing with Mithril</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Playing with <a href="http://lhorie.github.io/mithril/">Mithril</a></h1>
<div id="container"></div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.34/mithril.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// Namespace
var usersModule = {};
// View-Model (usersModule state / data)
usersModule.viewModel =
{
users: m.prop([]),
sampleUsers: function ()
{
var sample = _.sample(usersModule.UserList.users(), 3);
usersModule.viewModel.users(sample);
},
replaceUser: function (id)
{
var users = usersModule.viewModel.users();
var idx = _.findIndex(users, 'id', id);
// alert(id + " " + idx);
if (idx >= 0)
{
// Might loop until we get a user of different id...
users[idx] = _.sample(usersModule.UserList.users());
usersModule.viewModel.users(users);
}
}
};
// Model (domain)
usersModule.UserList =
{
users: m.prop([]),
load: function (process)
{
// Idea taken from https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
// Starting with http://jsfiddle.net/staltz/8jFJH/48/ as base
var randomOffset = Math.floor(Math.random() * 5000);
// Gets 100 GitHub users from a random offset
m.request({ method: 'GET', url: "https://api.github.com/users?since=" + randomOffset })
.then(usersModule.UserList.users).then(process);
}
};
// Controller (initialized once)
usersModule.controller = function ()
{
// Get the data
usersModule.UserList.load(usersModule.viewModel.sampleUsers);
return {
refreshAll: function ()
{
usersModule.viewModel.sampleUsers();
},
refreshUser: function (user)
{
usersModule.viewModel.replaceUser(user.id);
}
}
};
// View (rendering the UI, on each data change)
usersModule.view = function (controller)
{
return [
m('.header',
[
m('h2', "Who to follow"),
m('a.refresh[href="#"]', { onclick: controller.refreshAll }, "Refresh")
]),
m('ul.suggestions',
usersModule.viewModel.users().map(function (user)
{
return [
m('li',
[
// m('a.close[href="#"]', { onclick: m.withAttr('title', controller.close), title: user.id }, "x"),
m('a.close[href="#"]', { onclick: controller.refreshUser.bind(this, user) }, "x"),
m('img', { src: user.avatar_url + "&size=40", title: user.login + " (" + user.id + ")" }),
m('a.username', { href: user.html_url }, user.login)
])
];
})
)
];
};
// Initialize usersModule
m.module(document.getElementById("container"), usersModule);
body
{
font-family: sans-serif;
padding: 10px;
}
h2
{
font-weight: bold;
display: inline-block;
margin: 0;
line-height: 18px;
}
#container a
{
color: #88C;
text-decoration: none;
}
.header
{
background: #EEF;
padding: 15px;
}
.refresh
{
font-size: 80%;
margin-left: 25px;
}
.suggestions
{
border: 2px solid #EEF;
}
li
{
padding: 5px;
list-style-type: none;
}
li img
{
width: 40px;
height: 40px;
border-radius: 20px;
}
.username, .close
{
display: inline-block;
position: relative;
bottom: 15px;
}
.username
{
left: 15px;
}
.close
{
right: 15px;
}
#container .close /* override #container a */
{
color: #F55;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment