nested-props.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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. <div id="a">
  10. <h1>a.b.c : <span sd-text="a.b.c"></span></h1>
  11. <h2>a.c : <span sd-text="a.c"></span></h2>
  12. <h3>Computed property that concats the two: <span sd-text="d"></span></h3>
  13. <button sd-on="click:one">one</button>
  14. <button sd-on="click:two">two</button>
  15. <button sd-on="click:three">three</button>
  16. <p><input sd-value="msg"></p>
  17. </div>
  18. <div id="b">
  19. <h1 sd-text="a.c"></h1>
  20. </div>
  21. <script>
  22. Seed.config({debug: true})
  23. var data = { c: 555 }
  24. var Demo = Seed.extend({
  25. init: function () {
  26. this.msg = 'Yoyoyo'
  27. this.a = data
  28. },
  29. proto: {
  30. one: function () {
  31. this.a = {
  32. c: 1,
  33. b: {
  34. c: 'one'
  35. }
  36. }
  37. },
  38. two: function () {
  39. this.a.b = {
  40. c: 'two'
  41. }
  42. this.a.c = 2
  43. },
  44. three: function () {
  45. this.a.b.c = 'three'
  46. this.a.c = 3
  47. },
  48. d: {get: function () {
  49. return this.msg + (this.a.b.c || '') + (this.a.c || '')
  50. }}
  51. }
  52. })
  53. var app = new Demo({ el: '#a' }),
  54. app2 = new Seed({
  55. el: '#b',
  56. data: {
  57. a: data
  58. }
  59. })
  60. </script>
  61. </body>
  62. </html>