nested-props.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <script src="../dist/seed.js"></script>
  7. </head>
  8. <body>
  9. <h1>a.b.c : <span sd-text="a.b.c"></span></h1>
  10. <h2>a.c : <span sd-text="a.c"></span></h2>
  11. <h3>Computed property that concats the two: <span sd-text="d"></span></h3>
  12. <button sd-on="click:one">one</button>
  13. <button sd-on="click:two">two</button>
  14. <button sd-on="click:three">three</button>
  15. <p><input sd-value="msg"></p>
  16. <script>
  17. seed.config({debug: true})
  18. var data = {
  19. c: 0,
  20. b: {
  21. c: 'zero'
  22. }
  23. }
  24. var Demo = seed.ViewModel.extend({
  25. init: function () {
  26. this.msg = 'Yoyoyo'
  27. // example of async compilation
  28. var vm = this
  29. vm.$wait()
  30. setTimeout(function () {
  31. vm.a = data
  32. vm.$ready()
  33. }, 30)
  34. },
  35. props: {
  36. one: function () {
  37. this.a = {
  38. c: 1,
  39. b: {
  40. c: 'one'
  41. }
  42. }
  43. },
  44. two: function () {
  45. this.a.b = {
  46. c: 'two'
  47. }
  48. this.a.c = 2
  49. },
  50. three: function () {
  51. this.a.b.c = 'three'
  52. this.a.c = 3
  53. },
  54. d: {get: function (ctx) {
  55. return (ctx.vm.msg + this.a.b.c + this.a.c) || ''
  56. }}
  57. }
  58. })
  59. var app = new Demo({ el: document.body })
  60. </script>
  61. </body>
  62. </html>