| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>SEED repeated items</title>
- <meta charset="utf-8">
- </head>
- <body>
- <div id="app">
- <p>
- <button sd-on="click:push">push</button>
- <button sd-on="click:pop">pop</button>
- <button sd-on="click:shift">shift</button>
- <button sd-on="click:unshift">unshift</button>
- <button sd-on="click:splice">splice</button>
- <button sd-on="click:remove">remove</button>
- <button sd-on="click:replace">replace</button>
- <button sd-on="click:sort">sort</button>
- <button sd-on="click:reverse">reverse</button>
- </p>
- <p>Total items: {{items.length}}</p>
- <ul>
- <li sd-each="item:items" sd-text="item.title"></li>
- </ul>
- </div>
- <script src="../dist/seed.js"></script>
- <script>
- seed.config({debug: true})
- var items = [
- { title: 'A'},
- { title: 'B'},
- { title: 'C'}
- ]
- var demo = new seed.ViewModel({
- el: '#app',
- data: {
- items: items,
- push: function () {
- this.items.push({ title: randomChar() })
- },
- pop: function () {
- this.items.pop()
- },
- shift: function () {
- this.items.shift()
- },
- unshift: function () {
- this.items.unshift({ title: randomChar() })
- },
- splice: function () {
- this.items.splice(0, 1, { title: randomChar() }, { title: randomChar() })
- },
- replace: function () {
- this.items.replace(randomPos(), { title: randomChar() })
- },
- remove: function () {
- this.items.remove(randomPos())
- },
- sort: function () {
- this.items.sort(function (a, b) {
- return a.title.charCodeAt(0) - b.title.charCodeAt(0)
- })
- },
- reverse: function () {
- this.items.reverse()
- }
- }
- })
- function randomChar () {
- return String.fromCharCode(Math.floor(Math.random() * 30 + 50))
- }
- function randomPos () {
- return Math.floor(Math.random() * items.length)
- }
- </script>
- </body>
- </html>
|
