Context Navigation

← Previous Changeset
Next Changeset →

Changeset 12388

Timestamp:

02/11/08 20:42:32 (11 months ago)

Author:

pottedmeat

Message:

Refs #5773.

Update demos to use _HtmlTemplated
Fix small bugs to make demos work
Make note in README about load implementation
!strict

Location:

dojox/trunk/dtl

Files:

: 14 modified
: 1 moved

contrib/dijit.js (moved) (moved from dojox/trunk/dtl/contrib/event.js) (4 diffs)
contrib/html.js (modified) (1 diff)
demos/demo_Animation.html (modified) (3 diffs)
demos/demo_Blog.html (modified) (1 diff)
demos/demo_HtmlTemplated.html (modified) (1 diff)
demos/templates/animation.html (modified) (1 diff)
demos/templates/blog_list.html (modified) (1 diff)
demos/templates/blog_page.html (modified) (1 diff)
html.js (modified) (2 diffs)
README (modified) (1 diff)
tag/logic.js (modified) (1 diff)
tests/html/util.js (modified) (4 diffs)
tests/text/tag.js (modified) (3 diffs)
_base.js (modified) (5 diffs)
_HtmlTemplated.js (modified) (2 diffs)

Legend:

: Unmodified
: Added
: Removed

dojox/trunk/dtl/contrib/dijit.js

r12381	r12388
1		dojo.provide("dojox.dtl.contrib.~~even~~t");
	1	dojo.provide("dojox.dtl.contrib.dijit");
2	2
3	3	dojo.require("dojox.dtl.html");
…	…
5	5	(function(){
6	6	var dd = dojox.dtl;
7		var ddc~~e = dd.contrib.even~~t;
	7	var ddcd = dd.contrib.dijit;
8	8
9		ddce.EventNode = dojo.extend(function(types, fns){
	9	ddcd.AttachNode = dojo.extend(function(key){
	10	this.contents = key;
	11	},
	12	{
	13	render: function(context, buffer){
	14	if(!this._rendered){
	15	this._rendered = true;
	16	context.getThis()[this.contents] = buffer.getParent();
	17	}
	18	return buffer;
	19	},
	20	unrender: function(context, buffer){
	21	if(this._rendered){
	22	this._rendered = false;
	23	if(context.getThis()[this.contents] === buffer.getParent()){
	24	delete context.getThis()[this.contents];
	25	}
	26	}
	27	return buffer;
	28	},
	29	clone: function(buffer){
	30	return new this.constructor(this._styles);
	31	}
	32	});
	33
	34	ddcd.EventNode = dojo.extend(function(types, fns){
10	35	this._types = types;
11	36	this.contents = fns;
…	…
40	65	});
41	66
42		dojo.mixin(ddce, {
	67	dojo.mixin(ddcd, {
	68	dojoAttachPoint: function(parser, text){
	69	var parts = dd.text.pySplit(text);
	70	return new ddcd.AttachNode(parts[1]);
	71	},
43	72	dojoAttachEvent: function(parser, text){
44	73	text = text.slice(16);
…	…
65	94	}
66	95	}
67		return new ddce.EventNode(types, fns);
	96	return new ddcd.EventNode(types, fns);
68	97	},
69	98	on: function(parser, text){
70	99	// summary: Associates an event type to a function (on the current widget) by name
71	100	var parts = text.split(" ");
72		return new ddce.EventNode([parts[0]], [parts[1]]);
	101	return new ddcd.EventNode([parts[0]], [parts[1]]);
73	102	}
74	103	});
75	104
76	105	dd.register.tags("dojox.dtl.contrib", {
77		"~~event": ["attr:dojoAttachEvent", "attr:dojoAttachPoi~~nt", [/(attr:)?on(click\|key(up))/i, "on"]]
	106	"dijit": ["attr:dojoAttachPoint", ["attr:attach", "dojoAttachPoint"], "attr:dojoAttachEvent", [/(attr:)?on(click\|key(up))/i, "on"]]
78	107	});
79	108	})();

dojox/trunk/dtl/contrib/html.js

r12375	r12388
3	3	dojo.require("dojox.dtl.html");
4	4
5		dojox.dtl.contrib.html.HtmlNode = dojo.extend(function(name){
6		this.contents = new dojox.dtl._Filter(name);
7		this._div = document.createElement("div");
8		this._lasts = [];
9		},
10		{
11		render: function(context, buffer){
12		var text = this.contents.resolve(context);
13		text = text.replace(/<(\/?script)/ig, '<$1').replace(/\bon[a-z]+\s*=/ig, '');
14		if(this._rendered && this._last != text){
15		buffer = this.unrender(context, buffer);
	5	(function(){
	6	var dd = dojox.dtl;
	7	var ddch = dd.contrib.html;
	8
	9	ddch.HtmlNode = dojo.extend(function(name){
	10	this.contents = new dd._Filter(name);
	11	this._div = document.createElement("div");
	12	this._lasts = [];
	13	},
	14	{
	15	render: function(context, buffer){
	16	var text = this.contents.resolve(context);
	17	if(text){
	18	text = text.replace(/<(\/?script)/ig, '<$1').replace(/\bon[a-z]+\s*=/ig, '');
	19	if(this._rendered && this._last != text){
	20	buffer = this.unrender(context, buffer);
	21	}
	22	this._last = text;
	23
	24	// This can get reset in the above tag
	25	if(!this._rendered){
	26	this._rendered = true;
	27	var div = this._div;
	28	div.innerHTML = text;
	29	var children = div.childNodes;
	30	while(children.length){
	31	var removed = div.removeChild(children[0]);
	32	this._lasts.push(removed);
	33	buffer = buffer.concat(removed);
	34	}
	35	}
	36	}
	37
	38	return buffer;
	39	},
	40	unrender: function(context, buffer){
	41	if(this._rendered){
	42	this._rendered = false;
	43	this._last = "";
	44	for(var i = 0, node; node = this._lasts[i++];){
	45	buffer = buffer.remove(node);
	46	dojo._destroyElement(node);
	47	}
	48	this._lasts = [];
	49	}
	50	return buffer;
	51	},
	52	clone: function(buffer){
	53	return new this.constructor(this.contents.contents);
16	54	}
17		~~this._last = text~~;
	55	});
18	56
19		// This can get reset in the above tag
20		if(!this._rendered){
21		this._rendered = true;
22		var div = this._div;
23		div.innerHTML = text;
24		var children = div.childNodes;
25		while(children.length){
26		var removed = div.removeChild(children[0]);
27		this._lasts.push(removed);
28		buffer = buffer.concat(removed);
	57	ddch.StyleNode = dojo.extend(function(styles){
	58	this.contents = {};
	59	this._styles = styles;
	60	for(var key in styles){
	61	this.contents[key] = new dd.Template(styles[key]);
	62	}
	63	},
	64	{
	65	render: function(context, buffer){
	66	for(var key in this.contents){
	67	dojo.style(buffer.getParent(), key, this.contents[key].render(context));
29	68	}
	69	return buffer;
	70	},
	71	unrender: function(context, buffer){
	72	return buffer;
	73	},
	74	clone: function(buffer){
	75	return new this.constructor(this._styles);
30	76	}
	77	});
31	78
32		return buffer;
33		},
34		unrender: function(context, buffer){
35		if(this._rendered){
36		this._rendered = false;
37		this._last = "";
38		for(var i = 0, node; node = this._lasts[i++];){
39		buffer = buffer.remove(node);
40		dojo._destroyElement(node);
	79	dojo.mixin(ddch, {
	80	html: function(parser, text){
	81	var parts = text.split(" ", 2);
	82	return new ddch.HtmlNode(parts[1]);
	83	},
	84	tstyle: function(parser, text){
	85	var styles = {};
	86	text = text.replace(/^tstyle\s+/, "");
	87	var rules = text.split(/\s;\s/g);
	88	for(var i = 0, rule; rule = rules[i]; i++){
	89	var parts = rule.split(/\s:\s/g);
	90	var key = parts[0];
	91	var value = parts[1];
	92	if(value.indexOf("{{") == 0){
	93	styles[key] = value;
	94	}
41	95	}
42		~~this._lasts = []~~;
	96	return new ddch.StyleNode(styles);
43	97	}
44		return buffer;
45		},
46		clone: function(buffer){
47		return new this.constructor(this.contents.contents);
48		}
49		});
	98	});
50	99
51		dojox.dtl.contrib.html.StyleNode = dojo.extend(function(styles){
52		this.contents = {};
53		this._styles = styles;
54		for(var key in styles){
55		this.contents[key] = new dojox.dtl.Template(styles[key]);
56		}
57		},
58		{
59		render: function(context, buffer){
60		for(var key in this.contents){
61		dojo.style(buffer.getParent(), key, this.contents[key].render(context));
62		}
63		return buffer;
64		},
65		unrender: function(context, buffer){
66		return buffer;
67		},
68		clone: function(buffer){
69		return new this.constructor(this._styles);
70		}
71		});
72
73		dojox.dtl.contrib.html.AttachNode = dojo.extend(function(key){
74		this.contents = key;
75		},
76		{
77		render: function(context, buffer){
78		if(!this._rendered){
79		this._rendered = true;
80		context.getThis()[this.contents] = buffer.getParent();
81		}
82		return buffer;
83		},
84		unrender: function(context, buffer){
85		if(this._rendered){
86		this._rendered = false;
87		if(context.getThis()[this.contents] === buffer.getParent()){
88		delete context.getThis()[this.contents];
89		}
90		}
91		return buffer;
92		},
93		clone: function(buffer){
94		return new this.constructor(this._styles);
95		}
96		});
97
98		dojo.mixin(dojox.dtl.contrib.html, {
99		html: function(parser, text){
100		var parts = text.split(" ", 2);
101		return new dojox.dtl.contrib.html.HtmlNode(parts[1]);
102		},
103		tstyle: function(parser, text){
104		var styles = {};
105		text = text.replace(/^tstyle\s+/, "");
106		var rules = text.split(/\s;\s/g);
107		for(var i = 0, rule; rule = rules[i]; i++){
108		var parts = rule.split(/\s:\s/g);
109		var key = parts[0];
110		var value = parts[1];
111		if(value.indexOf("{{") == 0){
112		styles[key] = value;
113		}
114		}
115		return new dojox.dtl.contrib.html.StyleNode(styles);
116		},
117		attach: function(parser, text){
118		var parts = dojox.dtl.text.pySplit(text);
119		return new dojox.dtl.contrib.html.AttachNode(parts[1]);
120		}
121		});
122
123		dd.register.tags("dojox.dtl.contrib", {
124		"html": ["html", "attr:attach", "attr:tstyle"]
125		});
	100	dd.register.tags("dojox.dtl.contrib", {
	101	"html": ["html", "attr:tstyle"]
	102	});
	103	})();

dojox/trunk/dtl/demos/demo_Animation.html

r12304	r12388
4	4	<script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script>
5	5	<script>
6		dojo.require("d~~ojox.dtl.w~~idget");
7		dojo.require("dojox.dtl.~~Context~~");
	6	dojo.require("dijit._Widget");
	7	dojo.require("dojox.dtl._HtmlTemplated");
8	8
9		dojo.provide("demo");
10
11		dojo.declare("demo.Animation", dojox.dtl._Widget,
	9	dojo.declare("demo.Animation", [dijit._Widget, dojox.dtl._HtmlTemplated],
12	10	{
13	11	buffer: 0, // Note: Sensitivity is 0 by default, but this is to emphasize we're not doing any buffering
	12	templatePath: dojo.moduleUrl("dojox.dtl.demos.templates", "animation.html"),
14	13	constructor: function(props, node){
15		this.context = new dojox.dtl.Context({ x: 0, y: 0 });
16		this.template = new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "animation.html"));
	14	console.debug("constructor");
	15	this.x = 0;
	16	this.y = 0;
17	17	},
18	18	postCreate: function(){
19		~~this.render(this.template, this.context);~~
20	19	var anim = new dojo._Animation({
21	20	curve: [0, 300],
…	…
28	27	},
29	28	_reDraw: function(obj){
30		this.~~context.~~x = obj;
31		this.~~context.~~y = Math.sqrt(obj) * 10;
	29	this.x = obj;
	30	this.y = Math.sqrt(obj) * 10;
32	31
33		dojo.style(this.blue, "left", this.~~context.~~x);
34		dojo.style(this.blue, "top", this.~~context.~~y + 10);
	32	dojo.style(this.blue, "left", this.x);
	33	dojo.style(this.blue, "top", this.y + 10);
35	34
36		this.render(~~this.template, this.context~~);
	35	this.render();
37	36	}
38	37	});
…	…
42	41	</head>
43	42	<body>
44		<div dojoType="dojox.dtl.AttachPoint">
45		<div dojoType="demo.Animation" />
46		</div>
	43	<div dojoType="demo.Animation" />
47	44	</body>
48	45	</html>

dojox/trunk/dtl/demos/demo_Blog.html

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