dev.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>title</title>
  5. <meta charset="utf-8">
  6. <script src="dist/seed.js"></script>
  7. <style type="text/css">
  8. .red {
  9. color: red;
  10. }
  11. .todo.done {
  12. text-decoration: line-through;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="app" sd-controller="TodoList" sd-on="click:changeMessage | delegate .button">
  18. <p sd-text="msg | capitalize"></p>
  19. <p sd-text="msg | uppercase"></p>
  20. <p sd-on="click:remove">bye</p>
  21. <p sd-text="total | money"></p>
  22. <p class="button">Change Message</p>
  23. <p sd-class="red:error" sd-show="error">Error</p>
  24. <ul sd-show="todos">
  25. <li class="todo"
  26. sd-controller="Todo"
  27. sd-each="todo:todos"
  28. sd-class="done:todo.done"
  29. sd-on="click:changeMessage, click:todo.toggle"
  30. sd-text="msg"
  31. ></li>
  32. </ul>
  33. </div>
  34. <script>
  35. var Seed = require('seed')
  36. Seed.filter('money', function (value) {
  37. return value
  38. ? '$' + value.toFixed(2)
  39. : ''
  40. })
  41. Seed.controller('TodoList', function (scope, seed) {
  42. scope.changeMessage = function () {
  43. scope.msg = 'It works!'
  44. }
  45. scope.remove = function () {
  46. seed.destroy()
  47. }
  48. })
  49. Seed.controller('Todo', function (scope) {
  50. scope.toggle = function () {
  51. scope.done = !scope.done
  52. }
  53. })
  54. var s = Date.now()
  55. var data = {
  56. msg: 'hello!',
  57. total: 9999,
  58. error: true,
  59. todos: [
  60. {
  61. title: 'hello!',
  62. done: true
  63. },
  64. {
  65. title: 'hello!!',
  66. done: false
  67. },
  68. {
  69. title: 'hello!!!',
  70. done: false
  71. }
  72. ]
  73. }
  74. var app = Seed.bootstrap({
  75. el: '#app',
  76. data: data
  77. })
  78. console.log(Date.now() - s + 'ms')
  79. </script>
  80. </body>
  81. </html>