<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.1.min.js"></script>
</head>
<body>
<h1>Hello Mag.JS!</h1>
<a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
<hr/>
<p>From : https://www.bignerdranch.com/blog/how-to-use-facebooks-react-library-to-build-UIs-part-2/
</p>
<i>Rot13 encoder app</i>
<div id="app">
<div>
<div id="InputComponent"><input></div>
<div id="OutputComponent"><div></div></div>
</div>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/src/mag.addons.0.2.js"></script>
<script src="input-comp.js"></script>
<script src="output-comp.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Styles go here */
var inputComp = mag.create('InputComponent', {
controller: function(props) {
this._changeHandler = function(event) {
props.sendChange(event.target.value);
}
},
view: function(state, props) {
state.input = {
_onChange: state._changeHandler
}
}
})
var app = {}
var props = {
things: []
}
app.controller = function(props) {
props._updateValue = function(newValue) {
this.value = newValue
}.bind(this);
this.value = "I know kung fu!!!!"
}
app.view = function(state, props) {
inputComp({
sendChange: props._updateValue
})
outputComp({
value: state.value
})
}
mag.module('app', app)
var outputComp = mag.create('OutputComponent', {
controller: function(props) {
this._rot13 = function(s) {
return s.replace(/[a-zA-Z]/g, function(c) {
return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
});
}
},
view: function(state, props) {
state.div = state._rot13(props.value)
}
})