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;
|
|
|
|
|
}
|
2013-08-21 01:44:56 +08:00
|
|
|
p {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
2013-08-16 09:41:02 +08:00
|
|
|
p:not(.ancestor):before {
|
2013-08-21 01:44:56 +08:00
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -22px;
|
2013-08-16 09:41:02 +08:00
|
|
|
content: "└ ";
|
2013-08-21 01:44:56 +08:00
|
|
|
color: #F00;
|
2013-08-06 06:15:26 +08:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2013-08-21 01:44:56 +08:00
|
|
|
<div id="grandpa" sd-viewmodel="man" data-name="Andy" data-family="Johnson">
|
|
|
|
|
<p class="ancestor">{{name}} {{family}}</p>
|
2013-08-16 09:41:02 +08:00
|
|
|
|
|
|
|
|
<div sd-viewmodel="man" data-name="Jack">
|
2013-08-21 01:44:56 +08:00
|
|
|
<p>{{name}}, son of {{^name}}</p>
|
2013-08-16 09:41:02 +08:00
|
|
|
|
|
|
|
|
<div sd-viewmodel="man" data-name="Mike">
|
2013-08-21 01:44:56 +08:00
|
|
|
<p>{{name}}, son of {{^name}}</p>
|
2013-08-16 09:41:02 +08:00
|
|
|
|
2013-10-01 04:22:16 +08:00
|
|
|
<div sd-viewmodel="offspring" data-name="Tim">
|
2013-08-16 09:41:02 +08:00
|
|
|
</div>
|
|
|
|
|
|
2013-10-01 04:22:16 +08:00
|
|
|
<div sd-viewmodel="offspring" data-name="Tom">
|
2013-08-16 09:41:02 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div sd-viewmodel="man" data-name="Jason">
|
2013-08-21 01:44:56 +08:00
|
|
|
<p>{{name}}, son of {{^name}}</p>
|
2013-08-16 09:41:02 +08:00
|
|
|
|
2013-10-01 04:22:16 +08:00
|
|
|
<div sd-viewmodel="offspring" data-name="Andrew">
|
2013-08-06 06:15:26 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2013-10-01 04:22:16 +08:00
|
|
|
<script type="text/sd-template" id="sd-template-offspring">
|
2013-08-21 01:44:56 +08:00
|
|
|
<p>
|
|
|
|
|
{{name}}, son of {{^name}},
|
|
|
|
|
<br>
|
|
|
|
|
grandson of {{^^name}},
|
|
|
|
|
<br>
|
|
|
|
|
great-grandson of {{$name}},
|
|
|
|
|
<br>
|
|
|
|
|
and offspring of family {{family}}.
|
|
|
|
|
</p>
|
|
|
|
|
</script>
|
|
|
|
|
<script src="../dist/seed.js"></script>
|
2013-08-06 06:15:26 +08:00
|
|
|
<script>
|
2013-08-20 05:22:43 +08:00
|
|
|
seed.config({ debug: true })
|
2013-10-01 04:22:16 +08:00
|
|
|
seed.template('offspring', document.getElementById('sd-template-offspring').innerHTML)
|
|
|
|
|
|
2013-08-20 05:22:43 +08:00
|
|
|
var Man = seed.ViewModel.extend({
|
2013-08-16 09:41:02 +08:00
|
|
|
id: 'man',
|
|
|
|
|
init: function () {
|
|
|
|
|
this.name = this.$el.dataset.name
|
2013-08-21 01:44:56 +08:00
|
|
|
var family = this.$el.dataset.family
|
|
|
|
|
if (family) {
|
|
|
|
|
this.family = family
|
|
|
|
|
}
|
2013-08-16 06:46:32 +08:00
|
|
|
}
|
|
|
|
|
})
|
2013-10-01 04:22:16 +08:00
|
|
|
|
|
|
|
|
var Offspring = Man.extend({
|
|
|
|
|
id: 'offspring',
|
|
|
|
|
template: 'offspring'
|
|
|
|
|
})
|
|
|
|
|
|
2013-09-10 06:04:33 +08:00
|
|
|
seed.compile('#grandpa')
|
2013-08-06 06:15:26 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
