vue2/examples/nested-viewmodels.html

67 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Nested Controllers</title>
<style type="text/css">
div {
padding-left: 10px;
}
</style>
<script src="../dist/seed.js"></script>
</head>
<body>
<div id="grandpa">
<p sd-text="name"></p>
<div sd-viewmodel="Dad">
<p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
<div sd-viewmodel="Son">
<p><span sd-text="name"></span>,son of <span sd-text="^name"></span></p>
<div sd-viewmodel="Baby">
<p>
<span sd-text="name"></span>,
son of <span sd-text="^name"></span>,
grandson of <span sd-text="^^name"></span>
and great-grandson of <span sd-text="$name"></span>
</p>
</div>
</div>
</div>
</div>
<script>
Seed.config({
debug: true
})
var Grandpa = Seed.ViewModel.extend({
properties: {
name: 'Andy'
}
})
var Dad = Seed.ViewModel.extend({
id: 'Dad',
properties: {
name: 'Jack'
}
})
var Son = Seed.ViewModel.extend({
id: 'Son',
properties: {
name: 'Mike'
}
})
var Baby = Seed.ViewModel.extend({
id: 'Baby',
properties: {
name: 'Tim'
}
})
var demo = new Grandpa({ el: '#grandpa' })
</script>
</body>
</html>