examples/hello-world-simple.html

<!doctype html>
<html lang="en">
<head>
<title>modelview.js • Hello World  (Simple Mode)</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="modelview.js • Hello World" />

<style type="text/css">
#forkongithub a{background:#aa0000;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:0.9rem;line-height:1.4rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#aa0000;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;z-index:100;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;z-index:100;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}
</style>
</head>

<body>
    <span id="forkongithub"><a href="https://github.com/foo123/modelview.js">Fork me on GitHub</a></span>
    <header id="header">
        <h1>ModelView.js Hello Earth! (Simple Mode)</h1>
    </header>

<div id="html-snippet" data-snippet="HTML Code" data-snippet-type="htmlmixed" data-snippet-escape="1">
<script id="content" type="text/x-template">
    <b>Note:</b> Model Data keys are defined inside &#123; and &#125; template placeholders
    <br /><br />
    <b>Hello {msg}</b> &nbsp;&nbsp;(updated live on <i>keyup</i>)
    <br /><br />
    <input type="text" name="model[msg]" size="50" value="" mv-evt mv-on-keyup="update" />
    <button class="button" title="{msg.hello}" type="{buttonType}" mv-evt mv-on-click="alert">{hello}</button>
    <button class="button" mv-evt mv-on-click="hello_world">Hello World</button>
</script>
<div id="app"></div>
</div>

<script src="../build/modelview.js"></script>
<script id="js-snippet-without-jquery" type="text/javascript" data-snippet="JS Code (standalone)" data-snippet-type="javascript">
(function modelView(ModelView)
{
    "use strict";
    new ModelView.View('view')
    .model(
        new ModelView.Model(
            'model',
            // model data here ..
            {msg: 'Earth!'}
        )
        .getters({
            buttonType: function(){
                return 'World' === this.$data.msg ? 'button' : false /* remove attribute */;
            },
            hello: function(){
                return 'Hello ' + this.$data.msg;
            },
            'msg.hello': function(){
                return 'Say "Hello ' + this.$data.msg + '"';
            }
        })
        .dependencies({
            "buttonType": ["msg"],
            "hello": ["msg"]
        })
        // model data type-casters (if any) here ..
        .types({msg: ModelView.Type.Cast.STR})
        // model data validators (if any) here ..
        .validators({msg: ModelView.Validation.Validate.NOT_EMPTY})
    )
    .template(document.getElementById('content').innerHTML)
    .actions({
        // custom view actions (if any) here ..
        alert: function(evt, el) {
            alert(this.model().get('msg'));
        },
        hello_world: function(evt, el) {
            this.model().set('msg', "World", true);
        },
        update: function(evt, el) {
            this.model().set('msg', el.value, true);
        }
    })
    .shortcuts({
        'alt+h': 'alert'
    })
    .autovalidate(true)
    .option('model.events', false)
    .autobind(true) // default
    .livebind('text')
    .bind(['click', 'keyup'], document.getElementById('app'))
    .sync()
    ;
})(ModelView);
</script>
</body>
</html>