<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">

<style type="text/css">
{{>sync-modelchange-css}}
</style>

<div class="intro">
    <p>
        {{description}}
    </p>
    <p>
        <b>Wait for three seconds</b>. By timeout, the model gets new value: <code>firstname</code> --> 'Karin'. Because the user is busy filling in the UI-elements, he/she might or might not want the changed values appplied in the UI. A prompt pops up to make this decision.
    </p>
</div>

{{>sync-modelchange-html}}

<h2>Code</h2>
```
{{>sync-modelchange-js}}
```

<h2>Complete Example Source</h2>
```
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
<style type="text/css">
{{>sync-modelchange-css}}
</style>

<body>

{{>sync-modelchange-html}}

<script>
{{>sync-modelchange-js}}
</script>

</body>
```

<script>
{{>init-loaderconfig-js}}
{{>loaderconfig-js}}
{{>sync-modelchange-js}}
</script>