maksadbek/index.mithrill.html

## index.mithrill.html
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>pgmon</title>
</head>

<body>

    <div id="stats"></div>
    <script src="js/jquery.js"></script>
    <script src="js/mithril.min.js"></script>
    <script src="js/metricsgraphics.min.js"></script>
    <script>
       var n = m.prop("nahuy idi!!!");
       var input = {
           controller: function(){
               return {};
           },
           view: function(ctrl){
               return m("input", {oninput: m.withAttr("value", n), value: n()});
           }
       }

       var bindedInput = function(prop){
           return {oninput: m.withAttr("value", prop), value: prop()};
       }
       var email = m.prop("email");
       var emailInput = {
           controller: function(){
            return {};
           },
           view: function(ctrl){
            return m("input", bindedInput(email));
           }
       }
       function unloadable(element, isInit, context){
           context.onunload = function(){
               console.log("unloaded div element");
           }
       }
       m.render(document.getElementById("stats"), m("div", {config: unloadable}));
       m.mount(document.getElementById("stats"), emailInput);

       // route
       var menu = function() {
        return m("div", [
               m("a[href='/']", {config: m.route}, "Home"),
               m("a[href='/contact']", {config: m.route}, "Contact"),
               m("span", {config: persistent}, "Span")
        ])
       }

        function persistent(element, isInit, context) {
            context.retain = true;
            if(!isInit) {
                console.log("not initialized");
            }
        }

        var Home = {
            controller: function(){},
            view: function() {
                return m("div", [
                    menu(),
                    m("h1", "Home")
                ])
            }
        }

        var Contact = {
            controller: function(){},
            view: function() {
                return m("div", [
                    menu(),
                    m("h2", "Contact")
                ])
            }
        }

        var Main = {
            controller: function(){},
            view: function(){
                return m("div");
            }
        }
        m.route(document.getElementById("stats"), "/", {
            "/": Home,
            "/contact": Contact
        })

        // nested components with arguments
        var App = {
            view: function(){
                return m(".app", [
                    m("h1", "hi, it's my app"),
                    m.component(Component, {name: "Worls"}, "this is a testing")
                ])
            }
        }
        var Component = {
            controller: function(args, extras) {
                console.log(args.name, extras);
                return {greeting: "Hello", args: args, extras: extras}
            },
            view: function(ctrl) {
                return m("h1", ctrl.greeting + " " + ctrl.args.name + " " + ctrl.extras);
            }
        }
        var component = m.component(Component, {name: "world"}, "this is a test");
        m.render(document.body, App)
        // stateless components
        var StatelessApp = {
            controller: function() {
                return {
                    temp: m.prop(10)
                }
            },
            view: function(ctrl) {
                return m("div", [
                    m("input", {oninput: m.withAttr("value", ctrl.temp), value: ctrl.temp()}), "K",
                    m("br"),
                    m.component(TemperatureConverter, {value: ctrl.temp()})
                ]);
            }
        };

        var TemperatureConverter = {
            controller: function() {
                return {
                    kelvinToCelcius: function(value){
                        return value - 273.15;
                    },
                    kelvinToFahrenheit: function(value) {
                        return value * 9/5 - 459.67;
                    }
                }
            },
            view: function(ctrl, args) {
                return m("div", [
                        "celcius: ", ctrl.kelvinToCelcius(args.value),
                        m("br"),
                        "fagrenheit: ", ctrl.kelvinToFahrenheit(args.value),
                ])
            }
        }
        m.mount(document.body, StatelessApp);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>pgmon</title>
	</head>

	<body>

	<div id="stats"></div>
	<script src="js/jquery.js"></script>
	<script src="js/mithril.min.js"></script>
	<script src="js/metricsgraphics.min.js"></script>
	<script>
	var n = m.prop("nahuy idi!!!");
	var input = {
	controller: function(){
	return {};
	},
	view: function(ctrl){
	return m("input", {oninput: m.withAttr("value", n), value: n()});
	}
	}

	var bindedInput = function(prop){
	return {oninput: m.withAttr("value", prop), value: prop()};
	}
	var email = m.prop("email");
	var emailInput = {
	controller: function(){
	return {};
	},
	view: function(ctrl){
	return m("input", bindedInput(email));
	}
	}
	function unloadable(element, isInit, context){
	context.onunload = function(){
	console.log("unloaded div element");
	}
	}
	m.render(document.getElementById("stats"), m("div", {config: unloadable}));
	m.mount(document.getElementById("stats"), emailInput);

	// route
	var menu = function() {
	return m("div", [
	m("a[href='/']", {config: m.route}, "Home"),
	m("a[href='/contact']", {config: m.route}, "Contact"),
	m("span", {config: persistent}, "Span")
	])
	}

	function persistent(element, isInit, context) {
	context.retain = true;
	if(!isInit) {
	console.log("not initialized");
	}
	}

	var Home = {
	controller: function(){},
	view: function() {
	return m("div", [
	menu(),
	m("h1", "Home")
	])
	}
	}

	var Contact = {
	controller: function(){},
	view: function() {
	return m("div", [
	menu(),
	m("h2", "Contact")
	])
	}
	}

	var Main = {
	controller: function(){},
	view: function(){
	return m("div");
	}
	}
	m.route(document.getElementById("stats"), "/", {
	"/": Home,
	"/contact": Contact
	})

	// nested components with arguments
	var App = {
	view: function(){
	return m(".app", [
	m("h1", "hi, it's my app"),
	m.component(Component, {name: "Worls"}, "this is a testing")
	])
	}
	}
	var Component = {
	controller: function(args, extras) {
	console.log(args.name, extras);
	return {greeting: "Hello", args: args, extras: extras}
	},
	view: function(ctrl) {
	return m("h1", ctrl.greeting + " " + ctrl.args.name + " " + ctrl.extras);
	}
	}
	var component = m.component(Component, {name: "world"}, "this is a test");
	m.render(document.body, App)
	// stateless components
	var StatelessApp = {
	controller: function() {
	return {
	temp: m.prop(10)
	}
	},
	view: function(ctrl) {
	return m("div", [
	m("input", {oninput: m.withAttr("value", ctrl.temp), value: ctrl.temp()}), "K",
	m("br"),
	m.component(TemperatureConverter, {value: ctrl.temp()})
	]);
	}
	};

	var TemperatureConverter = {
	controller: function() {
	return {
	kelvinToCelcius: function(value){
	return value - 273.15;
	},
	kelvinToFahrenheit: function(value) {
	return value * 9/5 - 459.67;
	}
	}
	},
	view: function(ctrl, args) {
	return m("div", [
	"celcius: ", ctrl.kelvinToCelcius(args.value),
	m("br"),
	"fagrenheit: ", ctrl.kelvinToFahrenheit(args.value),
	])
	}
	}
	m.mount(document.body, StatelessApp);
	</script>
	</body>

	</html>