vuejs
/
vue
spegling av https://github.com/vuejs/vue.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SEED repeated items</title>
        <meta charset="utf-8">
        <script src="bind.js"></script>
        <script src="../../../dist/seed.js"></script>
    </head>
    <body>
        <div id="app">
            <p>
                <button class="push" sd-on="click:push">push</button>
                <button class="pop" sd-on="click:pop">pop</button>
                <button class="shift" sd-on="click:shift">shift</button>
                <button class="unshift" sd-on="click:unshift">unshift</button>
                <button class="splice" sd-on="click:splice">splice</button>
                <button class="remove" sd-on="click:remove">remove</button>
                <button class="replace" sd-on="click:replace">replace</button>
                <button class="sort" sd-on="click:sort">sort</button>
                <button class="reverse" sd-on="click:reverse">reverse</button>
            </p>
            <p>Total items: <span class="count" sd-text="items.length"></span></p>
            <ul>
                <li class="item" sd-repeat="item:items">
                    {{$index}} {{item.title}}
                </li>
            </ul>
        </div>
        <script>

            Seed.config({debug: true})

            var items = [
                { title: 'A'},
                { title: 'B'},
                { title: 'C'}
            ]

            var demo = new Seed({
                el: '#app',
                scope: {
                    items: items,
                    push: function () {
                        this.items.push({ title: getChar() })
                    },
                    pop: function () {
                        this.items.pop()
                    },
                    shift: function () {
                        this.items.shift()
                    },
                    unshift: function () {
                        this.items.unshift({ title: getChar() })
                    },
                    splice: function () {
                        this.items.splice(1, 1, { title: getChar() }, { title: getChar() })
                    },
                    replace: function () {
                        this.items.replace(getPos(), { title: getChar() })
                    },
                    remove: function () {
                        this.items.remove(getPos())
                    },
                    sort: function () {
                        this.items.sort(function (a, b) {
                            return a.title.charCodeAt(0) - b.title.charCodeAt(0)
                        })
                    },
                    reverse: function () {
                        this.items.reverse()
                    }
                }
            })

            var getChar = (function () {
                var count = 0
                return function () {
                    return (count++).toString()
                }
            })()

            function getPos () {
                return items.length - 1
            }
        </script>
    </body>
</html>