2013-08-06 06:15:26 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Nested Controllers</title>
|
|
|
|
|
<style type="text/css">
|
2013-08-16 09:41:02 +08:00
|
|
|
div:not(#grandpa) {
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
p:not(.ancestor):before {
|
|
|
|
|
content: "└ ";
|
2013-08-06 06:15:26 +08:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script src="../dist/seed.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2013-08-16 09:41:02 +08:00
|
|
|
<div id="grandpa" data-name="Andy">
|
|
|
|
|
<p class="ancestor" sd-text="name"></p>
|
|
|
|
|
|
|
|
|
|
<div sd-viewmodel="man" data-name="Jack">
|
2013-08-06 06:15:26 +08:00
|
|
|
<p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
|
2013-08-16 09:41:02 +08:00
|
|
|
|
|
|
|
|
<div sd-viewmodel="man" data-name="Mike">
|
|
|
|
|
<p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
|
|
|
|
|
|
|
|
|
|
<div sd-viewmodel="man" data-name="Tim">
|
|
|
|
|
<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 sd-viewmodel="man" data-name="Tom">
|
|
|
|
|
<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 sd-viewmodel="man" data-name="Jason">
|
|
|
|
|
<p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
|
|
|
|
|
|
|
|
|
|
<div sd-viewmodel="man" data-name="Andrew">
|
2013-08-09 11:20:53 +08:00
|
|
|
<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>
|
2013-08-06 06:15:26 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2013-08-16 06:46:32 +08:00
|
|
|
Seed.config({
|
|
|
|
|
debug: true
|
2013-08-06 06:15:26 +08:00
|
|
|
})
|
|
|
|
|
|
2013-08-16 09:41:02 +08:00
|
|
|
var Man = Seed.ViewModel.extend({
|
|
|
|
|
id: 'man',
|
|
|
|
|
init: function () {
|
|
|
|
|
this.name = this.$el.dataset.name
|
2013-08-16 06:46:32 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2013-08-16 09:41:02 +08:00
|
|
|
var demo = new Man({ el: '#grandpa' })
|
2013-08-16 06:46:32 +08:00
|
|
|
|
2013-08-06 06:15:26 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
