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

<div id="container">
    <form>
        <div>
        Name:
        <input type="text" data-db-bind="name"/>
        </div>
        <div>
        Last Name:
        <input type="text" data-db-bind="lastName"/>
        </div>
        <div>
        Married:
        <input type="checkbox" data-db-bind="married"/>
        </div>
        <button data-db-onclick="submitPerson();">submit</button>
    </form>
</div>

<h2>Example</h2>

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

<!-- example  -->
<div id="container">
    <form>
        <div>
        Name:
        <input type="text" data-db-bind="name"/>
        </div>
        <div>
        Last Name:
        <input type="text" data-db-bind="lastName"/>
        </div>
        <div>
        Married:
        <input type="checkbox" data-db-bind="married"/>
        </div>
        <button data-db-onclick="submitPerson();">submit</button>
    </form>
</div>

```


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

    var dombind = new Y.Common.DomBind({
        container: Y.one('#container'),
        controller: {
            submitPerson: function() {
                alert('Person submitted:' + Y.JSON.stringify(dombind.get('model')))
            }
        }
    });
    
});
```


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

    var dombind = new Y.Common.DomBind({
        container: Y.one('#container'),
        controller: {
            submitPerson: function() {
                alert('Person submitted:' + Y.JSON.stringify(dombind.get('model')))
            }
        }
    });
});
</script>