| New file |
|---|
| 0,0 → 1,114 |
|---|
| <html> |
| <head> |
| <title>Testing dojox.dtl using a blog example</title> |
| <script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script> |
| <script> |
| dojo.require("dojox.dtl.widget"); |
| |
| dojo.provide("demo"); |
| |
| dojo.declare("demo.Blog", dojox.dtl._Widget, |
| { |
| buffer: dojox.dtl.render.html.sensitivity.NODE, |
| constructor: function(props, node){ |
| this.contexts = { |
| list: false, |
| blogs: {}, |
| pages: {} |
| } |
| this.templates = { |
| list: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_list.html")), |
| detail: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_detail.html")), |
| page: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_page.html")) |
| } |
| }, |
| postCreate: function(){ |
| if(this.contexts.list){ |
| this.render(this.templates.list, this.contexts.list); |
| }else{ |
| dojo.xhrGet({ |
| url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_blog_list.json"), |
| handleAs: "json" |
| }).addCallback(this, "_loadList"); |
| } |
| }, |
| _showList: function(obj){ |
| this.render(this.templates.list, this.contexts.list); |
| }, |
| _showDetail: function(obj){ |
| var key = obj.target.className.substring(5); |
| |
| if(this.contexts.blogs[key]){ |
| this.render(this.templates.detail, this.contexts.blogs[key]); |
| }else{ |
| dojo.xhrGet({ |
| url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_blog_" + key + ".json"), |
| handleAs: "json", |
| load: function(data){ |
| data.key = key; |
| return data; |
| } |
| }).addCallback(this, "_loadDetail"); |
| } |
| }, |
| _showPage: function(obj){ |
| var key = obj.target.className.substring(5); |
| |
| if(this.contexts.pages[key]){ |
| this.render(this.templates.page, this.contexts.pages[key]); |
| }else{ |
| dojo.xhrGet({ |
| url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_page_" + key + ".json"), |
| handleAs: "json", |
| load: function(data){ |
| data.key = key; |
| return data; |
| } |
| }).addCallback(this, "_loadPage"); |
| } |
| }, |
| _loadList: function(data){ |
| this.contexts.list = new dojox.dtl.Context(data).extend({ |
| title: "Blog Posts", |
| base: { |
| url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"), |
| shared: true |
| } |
| }); |
| this.render(this.templates.list, this.contexts.list); |
| }, |
| _loadDetail: function(data){ |
| var context = { |
| title: "Blog Post", |
| blog: data |
| } |
| context.blog.date = new Date(context.blog.date); |
| context.blog.title = this.contexts.list.get("blog_list", {})[data.key].title; |
| this.contexts.blogs[data.key] = new dojox.dtl.Context(context).extend({ |
| base: { |
| url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"), |
| shared: true |
| } |
| }); |
| this.render(this.templates.detail, this.contexts.blogs[data.key]); |
| }, |
| _loadPage: function(data){ |
| this.contexts.pages[data.key] = new dojox.dtl.Context(data).extend({ |
| base: { |
| url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"), |
| shared: true |
| } |
| }); |
| this.render(this.templates.page, this.contexts.pages[data.key]); |
| } |
| }); |
| |
| dojo.require("dojo.parser"); |
| </script> |
| </head> |
| <body> |
| <div dojoType="dojox.dtl.AttachPoint"> |
| <div dojoType="demo.Blog" /> |
| </div> |
| </body> |
| </html> |