demo_Blog.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <html>
  2. <head>
  3. <title>Testing dojox.dtl using a blog example</title>
  4. <script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script>
  5. <script>
  6. dojo.require("dojox.dtl.widget");
  7. dojo.provide("demo");
  8. dojo.declare("demo.Blog", dojox.dtl._Widget,
  9. {
  10. buffer: dojox.dtl.render.html.sensitivity.NODE,
  11. constructor: function(props, node){
  12. this.contexts = {
  13. list: false,
  14. blogs: {},
  15. pages: {}
  16. }
  17. this.templates = {
  18. list: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_list.html")),
  19. detail: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_detail.html")),
  20. page: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_page.html"))
  21. }
  22. },
  23. postCreate: function(){
  24. if(this.contexts.list){
  25. this.render(this.templates.list, this.contexts.list);
  26. }else{
  27. dojo.xhrGet({
  28. url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_blog_list.json"),
  29. handleAs: "json"
  30. }).addCallback(this, "_loadList");
  31. }
  32. },
  33. _showList: function(obj){
  34. this.render(this.templates.list, this.contexts.list);
  35. },
  36. _showDetail: function(obj){
  37. var key = obj.target.className.substring(5);
  38. if(this.contexts.blogs[key]){
  39. this.render(this.templates.detail, this.contexts.blogs[key]);
  40. }else{
  41. dojo.xhrGet({
  42. url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_blog_" + key + ".json"),
  43. handleAs: "json",
  44. load: function(data){
  45. data.key = key;
  46. return data;
  47. }
  48. }).addCallback(this, "_loadDetail");
  49. }
  50. },
  51. _showPage: function(obj){
  52. var key = obj.target.className.substring(5);
  53. if(this.contexts.pages[key]){
  54. this.render(this.templates.page, this.contexts.pages[key]);
  55. }else{
  56. dojo.xhrGet({
  57. url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_page_" + key + ".json"),
  58. handleAs: "json",
  59. load: function(data){
  60. data.key = key;
  61. return data;
  62. }
  63. }).addCallback(this, "_loadPage");
  64. }
  65. },
  66. _loadList: function(data){
  67. this.contexts.list = new dojox.dtl.Context(data).extend({
  68. title: "Blog Posts",
  69. base: {
  70. url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"),
  71. shared: true
  72. }
  73. });
  74. this.render(this.templates.list, this.contexts.list);
  75. },
  76. _loadDetail: function(data){
  77. var context = {
  78. title: "Blog Post",
  79. blog: data
  80. }
  81. context.blog.date = new Date(context.blog.date);
  82. context.blog.title = this.contexts.list.get("blog_list", {})[data.key].title;
  83. this.contexts.blogs[data.key] = new dojox.dtl.Context(context).extend({
  84. base: {
  85. url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"),
  86. shared: true
  87. }
  88. });
  89. this.render(this.templates.detail, this.contexts.blogs[data.key]);
  90. },
  91. _loadPage: function(data){
  92. this.contexts.pages[data.key] = new dojox.dtl.Context(data).extend({
  93. base: {
  94. url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"),
  95. shared: true
  96. }
  97. });
  98. this.render(this.templates.page, this.contexts.pages[data.key]);
  99. }
  100. });
  101. dojo.require("dojo.parser");
  102. </script>
  103. </head>
  104. <body>
  105. <div dojoType="dojox.dtl.AttachPoint">
  106. <div dojoType="demo.Blog" />
  107. </div>
  108. </body>
  109. </html>