123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <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>
|