<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
<meta charset="utf-8">
<title>JS Bin</title>
<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="bootstrap.js" type="module"></script>
</head>
<body>
<h1>Hello Mag.JS!</h1>
<a target="_top" href="https://github.com/magnumjs/mag.js">GitHub</a>
<hr/>
<div id="demo">
<h2>Boilerplate</h2>
<select id="menu">
<option></option>
</select>
<input name="other" />
<button>Submit</button>
<result></result>
</div>
</body>
</html>
import {instance} from "./app.js"
instance.subscribe(s =>console.warn(JSON.stringify(s)))
/* Styles go here */
export {
instance
}
var demo = {};
demo.controller = function(props) {
this.show = false
this.other = 'Hi';
this.input = mag.disable(()=>this.show);
this.menu = {
option: ['one', 'two', 'three']
}
this.select = 'three';
};
demo.view = function(state, props) {
state.button = {
_onclick: function() {
state.show = !state.show
state.result = state.select + "-" + state.other;
}
};
};
const instance = mag.module("demo", demo);