Advertisement
Guest User

Untitled

a guest
Nov 25th, 2014
197
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.19 KB | None | 0 0
  1. (function () {
  2. var Application;
  3.  
  4. $(function () {
  5.  
  6. Application = new Backbone.Marionette.Application();
  7.  
  8. Application.addRegions({
  9. top: "#top",
  10. middle: "#middle",
  11. bottom: "#bottom"
  12. });
  13.  
  14. var topLayout = Backbone.Marionette.ItemView.extend({
  15. template: "#tpl_topLayout",
  16. tagName: "article"
  17. });
  18. var middleLayout = Backbone.Marionette.Layout.extend({
  19. template: "#tpl_middleLayout",
  20.  
  21. regions: {
  22. left: "#left",
  23. right: "#right"
  24. }
  25. });
  26.  
  27. var middleLayoutOne = Backbone.Marionette.ItemView.extend({
  28. template: "#tpl_middleLayoutOne",
  29. tagName: "article"
  30. });
  31. var middleLayoutTwo = Backbone.Marionette.ItemView.extend({
  32. template: "#tpl_middleLayoutTwo",
  33. tagName: "article"
  34. });
  35.  
  36. var bottomLayout = Backbone.Marionette.ItemView.extend({
  37. template: "#tpl_bottomLayout",
  38. tagName: "article"
  39. });
  40.  
  41. var a = new middleLayout;
  42.  
  43. a.left.show(new middleLayoutOne);
  44. a.right.show(new middleLayoutTwo);
  45.  
  46. Application.top.show(new topLayout);
  47. Application.middle.show(a);
  48. Application.bottom.show(new bottomLayout);
  49.  
  50. Application.start();
  51. });
  52.  
  53. }());
  54.  
  55. <article id="layouts">
  56. <section id="top"></section>
  57. <section id="middle"></section>
  58. <section id="bottom"></section>
  59. </article>
  60. <script type="text/template" id="tpl_topLayout">
  61. Top layout
  62. </script>
  63. <script type="text/template" id="tpl_middleLayout">
  64. Middle layout
  65. <div id="left"></div>
  66. <div id="right"></div>
  67. </script>
  68. <script type="text/template" id="tpl_middleLayoutOne">
  69. Middle layout 1
  70. </script>
  71. <script type="text/template" id="tpl_middleLayoutTwo">
  72. Middle layout 2
  73. </script>
  74. <script type="text/template" id="tpl_bottomLayout">
  75. Bottom layout
  76. </script>
  77.  
  78. Application.middle.show(a);
  79. a.left.show(new middleLayoutOne);
  80. a.right.show(new middleLayoutTwo);
  81.  
  82. var a = new middleLayout;
  83. Application.middle.show(a);
  84. a.left.show(new middleLayoutOne);
  85. a.right.show(new middleLayoutTwo);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement