| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Nested Controllers</title>
- <style type="text/css">
- div:not(#grandpa) {
- padding-left: 15px;
- }
- p:not(.ancestor):before {
- content: "└ ";
- }
- </style>
- <script src="../dist/seed.js"></script>
- </head>
- <body>
- <div id="grandpa" data-name="Andy">
- <p class="ancestor" sd-text="name"></p>
- <div sd-viewmodel="man" data-name="Jack">
- <p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
- <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">
- <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 Man = seed.ViewModel.extend({
- id: 'man',
- init: function () {
- this.name = this.$el.dataset.name
- }
- })
- var demo = new Man({ el: '#grandpa' })
- </script>
- </body>
- </html>
|