vuejs
/
vue
зеркало из https://github.com/vuejs/vue.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!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" sd-viewmodel="man" 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="man" data-name="Tim" sd-template="offspring">
                </div>

                <div sd-viewmodel="man" data-name="Tom" sd-template="offspring">
                </div>
            </div>

            <div sd-viewmodel="man" data-name="Jason">
                <p>{{name}}, son of {{^name}}</p>

                <div sd-viewmodel="man" data-name="Andrew" sd-template="offspring">
                </div>
            </div>
        </div>
    </div>

    <script type="text/sd-template" sd-template-id="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.ViewModel.extend({
            id: 'man',
            init: function () {
                this.name = this.$el.dataset.name
                var family = this.$el.dataset.family
                if (family) {
                    this.family = family
                }
            }
        })
        seed.bootstrap('#grandpa')
    </script>
</body>
</html>