<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
<link href="//rawgit.com/magnumjs/mag.js/master/src/old/mag.comps.css" rel="stylesheet">
<script src="//rawgit.com/magnumjs/mag.js/master/mag.min.js"></script>
<style>
.hide {
display: none
}
</style>
</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="CommentBox">
<h1>Comments</h1>
<div id="CommentList">
<ul class="commentList"><li></li></ul>
<div id="Comment">
<h2 class="author"></h2>
<span class="text"></span>
</div>
</div>
<div id="CommentForm">
<form class="commentForm">
<input name="author">
<input name="text">
<input class="add" type="submit">
</form>
</div>
</div>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/src/old/mag.addons.js"></script>
<script src="//rawgit.com/magnumjs/mag.js/master/src/old/mag.comps.js"></script>
<script src="CommentBox.js"></script>
<script src="CommentList.js"></script>
<script src="Comment.js"></script>
<script src="CommentForm.js"></script>
<script src="app-init.js"></script>
</body>
</html>
// Create mag module reference initializer
// initialize mag module reference
mag.mods.commenting.CommentBox({
data: [{
"author": "Pete Hunt",
"text": "This is one comment"
}, {
"author": "Michael Glazer",
"text": "willLoad & didLoad lifecycle events needed"
}]
});
#Mag.JS Modular namespacing
Best practice in creating objects
1. always have one global top level namespace
e.g. var MyCoolApp = MyCoolApp || {};
2. That is included on every page
3.All sub modules are based on that
But they use local vars and return in functions
(function(commenting) {
var collection = []
var CommentBox = {
controller: function(props) {
this.data = props.data
this.handleCommentSubmit = function(comment) {
this.data.push(comment)
}.bind(this)
},
view: function(state, props) {
mag.mods.commenting.CommentList({
data: state.data
});
mag.mods.commenting.CommentForm({
onCommentSubmit: state.handleCommentSubmit
});
}
}
commenting.CommentBox = mag.comp('CommentBox', CommentBox);
})(mag.namespace('mods.commenting'));
(function(commenting) {
var CommentList = {
view: function(state, props) {
state.commentList = props.data.map(function(datum){
return {
li : mag.mods.commenting.Comment(datum, true)
}
})
}
}
commenting.CommentList = mag.comp('CommentList',CommentList);
})(mag.namespace('mods.commenting'));
(function(commenting) {
var CommentForm = {
controller: function(props) {
this.author = '';
this.text = ''
props.handleSubmit = function(e) {
e.preventDefault();
if (this.author && this.text) {
props.onCommentSubmit({
author: this.author,
text: this.text
})
this.author = '';
this.text = ''
}
}.bind(this)
},
view: function(state, props) {
state.add = {
_onclick: props.handleSubmit
}
}
}
commenting.CommentForm = mag.comp('CommentForm', CommentForm);
})(mag.namespace('mods.commenting'));
(function(commenting) {
var Comment = {
view: function(state, props) {
state.author = props.author
state.text = props.text
}
}
commenting.Comment = mag.comp('Comment',Comment);
})(mag.namespace('mods.commenting'));