mirror of https://github.com/vuejs/vue.git
85 lines
2.1 KiB
HTML
85 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Nested Controllers</title>
|
|
<style type="text/css">
|
|
div:not(#grandpa) {
|
|
padding-left: 15px;
|
|
}
|
|
p {
|
|
position: relative;
|
|
}
|
|
p:not(.ancestor):before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -22px;
|
|
content: "└ ";
|
|
color: #F00;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="grandpa" data-name="Andy" data-family="Johnson">
|
|
<p class="ancestor">{{name}} {{family}}</p>
|
|
|
|
<div sd-viewmodel="man" data-name="Jack">
|
|
<p>{{name}}, son of {{^name}}</p>
|
|
|
|
<div sd-viewmodel="man" data-name="Mike">
|
|
<p>{{name}}, son of {{^name}}</p>
|
|
|
|
<div sd-viewmodel="offspring" data-name="Tim">
|
|
</div>
|
|
|
|
<div sd-viewmodel="offspring" data-name="Tom">
|
|
</div>
|
|
</div>
|
|
|
|
<div sd-viewmodel="man" data-name="Jason">
|
|
<p>{{name}}, son of {{^name}}</p>
|
|
|
|
<div sd-viewmodel="offspring" data-name="Andrew">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/sd-template" id="sd-template-offspring">
|
|
<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>
|
|
<script>
|
|
Seed.config({ debug: true })
|
|
|
|
var Man = Seed.extend({
|
|
init: function () {
|
|
this.name = this.$el.dataset.name
|
|
var family = this.$el.dataset.family
|
|
if (family) {
|
|
this.family = family
|
|
}
|
|
}
|
|
})
|
|
|
|
var Offspring = Man.extend({
|
|
template: document.getElementById('sd-template-offspring').innerHTML
|
|
})
|
|
|
|
Seed.vm('man', Man)
|
|
Seed.vm('offspring', Offspring)
|
|
|
|
new Man({
|
|
el: '#grandpa'
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html> |