<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Mag.JS</title>
</head>
<body>
<h1>Hello Mag.JS!</h1>
<a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
<hr/>
<div id="app">
<div id="user-list" class="user-list">
<a class="user-list-item"></a>
</div>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.22.min.js"></script>
<script src="user.js"></script>
<script src="user-list.js"></script>
<script src="app.js"></script>
</body>
</html>
//Main:
var app = {};
app.controller = function(props) {
}
app.view = function(state, props) {
mag.module('user-list', UserList)
}
mag.module("app", app)
a:empty, .hide {
display: none;
}
.user-list {list-style:none;margin:0 0 10px;padding:0;}
.user-list-item {background:#fafafa;border:1px solid #ddd;color:#333;display:block;margin:0 0 1px;padding:8px 15px;text-decoration:none;}
.user-list-item:hover {text-decoration:underline;}
#Mag.JS
## plunk boilerplate
var User = {
list: [],
loadList: function() {
return mag.request({
method: "GET",
url: "https://rem-rest-api.herokuapp.com/api/users",
withCredentials: true,
})
.then(function(result) {
User.list = result.data
return result;
})
},
}
var UserList = {
controller: function(){
this.list = User.loadList();
},
view: function(state) {
if(state.list.data){
state.a = state.list.data.map(function(user) {
return {
_href: "#/edit/" + user.id,
_text: user.firstName + " " + user.lastName
}
});
}
}
}