{{>module-include}}
<style>
    #container {
        padding: 20px;
        background: #CDF2FF;
    }
    
</style>
<div class="intro">
    <p>
    {{description}}
    </p>
</div>

<div id="container">
    <form>
        <button data-db-onclick="generateRandom();">generate random</button>
        <div>
        Random number is:
        <input type="text" data-db-bind="random"/>
        </div>
    </form>
</div>

<h2>Example</h2>

<h3>HTML</h3>
```
<!-- component include  -->
{{>module-include}}

<!-- example  -->
<div id="container">
    <form>
        <button data-db-onclick="generateRandom();">generate random</button>
        <div>
        Random number is:
        <input type="text" data-db-bind="random"/>
        </div>
    </form>
</div>

```


<h3>Javascript</h3>
```
YUI().use('gallery-y-common-dombind', function(Y) {

    var dombind = new Y.Common.DomBind({
        container: Y.one('#container'),
        controller: {
            generateRandom: function() {
                dombind.setModel('random', Math.floor(Math.random()*1000));
            }
        }
    });
    
});
```


<script>
YUI({{{yuiConfig}}}).use('gallery-y-common-dombind', 'json-stringify', function(Y) {

    var dombind = new Y.Common.DomBind({
        container: Y.one('#container'),
        controller: {
            generateRandom: function() {
                dombind.setModel('random', Math.floor(Math.random()*1000));
            }
        }
    });
});
</script>