nested-props.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <script src="bind.js"></script>
  7. <script src="../../../dist/seed.js"></script>
  8. </head>
  9. <body>
  10. <div id="a">
  11. <h1>a.b.c : <span sd-text="a.b.c"></span></h1>
  12. <h2>a.c : <span sd-text="a.c"></span></h2>
  13. <h3>Computed property that concats the two: <span sd-text="d"></span></h3>
  14. <button class="one" sd-on="click:one">one</button>
  15. <button class="two" sd-on="click:two">two</button>
  16. <button class="three" sd-on="click:three">three</button>
  17. <form id="form"><input name="msg" sd-model="msg"></form>
  18. </div>
  19. <script>
  20. Seed.config({debug: true})
  21. var data = { c: 555 }
  22. var Demo = Seed.extend({
  23. lazy: true,
  24. init: function () {
  25. this.msg = 'Yoyoyo'
  26. this.a = data
  27. },
  28. proto: {
  29. one: function () {
  30. this.a = {
  31. c: 1,
  32. b: {
  33. c: 'one'
  34. }
  35. }
  36. },
  37. two: function () {
  38. this.a.b = {
  39. c: 'two'
  40. }
  41. this.a.c = 2
  42. },
  43. three: function () {
  44. this.a.b.c = 'three'
  45. this.a.c = 3
  46. },
  47. d: {
  48. $get: function () {
  49. return this.msg + (this.a.b.c || '') + (this.a.c || '')
  50. }
  51. }
  52. }
  53. })
  54. var app = new Demo({ el: '#a' })
  55. </script>
  56. </body>
  57. </html>