Skip to content

Commit 2d97cd7

Browse files
kevinpschaafkevinpschaaf
committed
Add templatizer tests. Fix issues from tests.
1 parent 2e086fe commit 2d97cd7

5 files changed

Lines changed: 473 additions & 6 deletions

File tree

‎src/lib/template/templatizer.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,15 +109,15 @@
109109
// archetypes do special caching
110110
this._customPrepAnnotations(archetype, template);
111111

112+
// forward parent properties to archetype
113+
this._prepParentProperties(archetype, template);
114+
112115
// setup accessors
113116
archetype._prepEffects();
114117
this._customPrepEffects(archetype);
115118
archetype._prepBehaviors();
116119
archetype._prepBindings();
117120

118-
// forward parent properties to archetype
119-
this._prepParentProperties(archetype, template);
120-
121121
// boilerplate code
122122
archetype._notifyPath = this._notifyPathImpl;
123123
archetype._scopeElementClass = this._scopeElementClassImpl;
@@ -241,10 +241,12 @@
241241
}
242242
}
243243
// Instance setup
244-
this._extendTemplate(template, proto);
245244
if (template != this) {
246245
Polymer.Bind.prepareInstance(template);
247246
template._forwardParentProp = this._forwardParentProp.bind(this);
247+
}
248+
this._extendTemplate(template, proto);
249+
if (template != this) {
248250
template._pathEffector = this._pathEffectorTemplate.bind(this);
249251
}
250252
}
@@ -259,7 +261,7 @@
259261
_createHostPropEffector: function(prop) {
260262
var prefix = this._parentPropPrefix;
261263
return function(source, value) {
262-
this.dataHost[prefix + prop] = value;
264+
this.dataHost._templatized[prefix + prop] = value;
263265
};
264266
},
265267

@@ -299,7 +301,7 @@
299301
// Call extension point for Templatizer sub-classes
300302
dataHost._forwardInstancePath.call(dataHost, this, path, value);
301303
if (root in dataHost._parentProps) {
302-
dataHost.notifyPath(dataHost._parentPropPrefix + path, value);
304+
dataHost._templatized.notifyPath(dataHost._parentPropPrefix + path, value);
303305
}
304306
},
305307

‎src/standard/notify-path.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,7 +491,9 @@
491491
// Base or all in Bind.
492492
prepareModelNotifyPath: function(model) {
493493
this.mixin(model, {
494+
fire: Polymer.Base.fire,
494495
notifyPath: Polymer.Base.notifyPath,
496+
_EVENT_CHANGED: Polymer.Base._EVENT_CHANGED,
495497
_notifyPath: Polymer.Base._notifyPath,
496498
_pathEffector: Polymer.Base._pathEffector,
497499
_annotationPathEffect: Polymer.Base._annotationPathEffect,

‎test/runner.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
'unit/styling-cross-scope-unknown-host.html',
5858
'unit/custom-style.html',
5959
'unit/dynamic-import.html',
60+
'unit/templatizer.html',
6061
'unit/dom-repeat.html',
6162
'unit/dom-if.html',
6263
'unit/dom-bind.html',

‎test/unit/templatizer-elements.html‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<dom-module id="x-host">
2+
<template>
3+
4+
<x-templatizer obj="{{objA}}" prop="{{propA}}" id="templatizer">
5+
<template>
6+
<x-child id="childA"
7+
outer-prop="{{outerProp}}"
8+
outer-obj="{{outerObj}}"
9+
outer-obj-prop="{{outerObj.prop}}"
10+
prop="{{prop}}"
11+
obj="{{obj}}"
12+
obj-prop="{{obj.prop}}"
13+
></x-child>
14+
</template>
15+
</x-templatizer>
16+
17+
<template is="x-templatizee" obj="{{objB}}" prop="{{propB}}" id="templatizee">
18+
<x-child id="childB"
19+
outer-prop="{{outerProp}}"
20+
outer-obj="{{outerObj}}"
21+
outer-obj-prop="{{outerObj.prop}}"
22+
prop="{{prop}}"
23+
obj="{{obj}}"
24+
obj-prop="{{obj.prop}}"
25+
></x-child>
26+
</template>
27+
28+
</template>
29+
</dom-module>
30+
31+
<script>
32+
Polymer({
33+
is: 'x-child',
34+
properties: {
35+
outerProp: {
36+
notify: true
37+
},
38+
outerObj: {
39+
notify: true
40+
},
41+
outerObjProp: {
42+
notify: true
43+
},
44+
prop: {
45+
notify: true
46+
},
47+
obj: {
48+
notify: true
49+
},
50+
objProp: {
51+
notify: true
52+
}
53+
},
54+
observers: [
55+
'objChanged(obj.*)',
56+
'outerObjChanged(outerObj.*)'
57+
],
58+
objChanged: function() {},
59+
outerObjChanged: function() {}
60+
});
61+
62+
Polymer({
63+
is: 'x-templatizer',
64+
behaviors: [Polymer.Templatizer],
65+
properties: {
66+
obj: {
67+
notify: true
68+
},
69+
prop: {
70+
notify: true,
71+
observer: 'propChanged'
72+
}
73+
},
74+
observers: [
75+
'objChanged(obj.*)'
76+
],
77+
_instanceProps: {
78+
obj: true,
79+
prop: true
80+
},
81+
propChanged: function(value) {
82+
this._forwardParentProp('prop', value);
83+
},
84+
objChanged: function(info) {
85+
if (info.path == 'obj') {
86+
this._forwardParentProp('obj', info.value);
87+
} else {
88+
this._forwardParentPath(info.path, info.value);
89+
}
90+
},
91+
_forwardParentProp: function(prop, value) {
92+
if (this.instance) {
93+
this.instance[prop] = value;
94+
}
95+
},
96+
_forwardParentPath: function(path, value) {
97+
if (this.instance) {
98+
this.instance.notifyPath(path, value, true);
99+
}
100+
},
101+
_forwardInstanceProp: function(inst, prop, value) {
102+
if (prop == 'obj') {
103+
this.obj = value;
104+
} else if (prop == 'prop') {
105+
this.prop = value;
106+
}
107+
},
108+
_forwardInstancePath: function(inst, path, value) {
109+
if ((path.indexOf('obj.') === 0) || (path.indexOf('prop.') === 0)) {
110+
this.notifyPath(path, value);
111+
}
112+
},
113+
go: function() {
114+
var template = Polymer.dom(this).querySelector('template');
115+
this.templatize(template);
116+
this.instance = this.stamp({obj: this.obj, prop: this.prop});
117+
var parent = Polymer.dom(this).parentNode;
118+
Polymer.dom(parent).appendChild(this.instance.root);
119+
}
120+
});
121+
122+
Polymer({
123+
is: 'x-templatizee',
124+
extends: 'template',
125+
behaviors: [Polymer.Templatizer],
126+
properties: {
127+
obj: {
128+
notify: true
129+
},
130+
prop: {
131+
notify: true,
132+
observer: 'propChanged'
133+
}
134+
},
135+
observers: [
136+
'objChanged(obj.*)'
137+
],
138+
_instanceProps: {
139+
obj: true,
140+
prop: true
141+
},
142+
propChanged: function(value) {
143+
this._forwardParentProp('prop', value);
144+
},
145+
objChanged: function(info) {
146+
if (info.path == 'obj') {
147+
this._forwardParentProp('obj', info.value);
148+
} else {
149+
this._forwardParentPath(info.path, info.value);
150+
}
151+
},
152+
_forwardParentProp: function(prop, value) {
153+
if (this.instance) {
154+
this.instance[prop] = value;
155+
}
156+
},
157+
_forwardParentPath: function(path, value) {
158+
if (this.instance) {
159+
this.instance.notifyPath(path, value, true);
160+
}
161+
},
162+
_forwardInstanceProp: function(inst, prop, value) {
163+
if (prop == 'obj') {
164+
this.obj = value;
165+
} else if (prop == 'prop') {
166+
this.prop = value;
167+
}
168+
},
169+
_forwardInstancePath: function(inst, path, value) {
170+
if ((path.indexOf('obj.') === 0) || (path.indexOf('prop.') === 0)) {
171+
this.notifyPath(path, value);
172+
}
173+
},
174+
go: function() {
175+
this.templatize(this);
176+
this.instance = this.stamp({obj: this.obj, prop: this.prop});
177+
var parent = Polymer.dom(this).parentNode;
178+
Polymer.dom(parent).appendChild(this.instance.root);
179+
}
180+
});
181+
182+
Polymer({
183+
is: 'x-host',
184+
properties: {
185+
outerProp: {
186+
value: 'outerProp'
187+
},
188+
outerObj: {
189+
value: function() {
190+
return { prop: 'outerObj.prop' };
191+
}
192+
},
193+
propA: {
194+
value: 'prop-a'
195+
},
196+
objA: {
197+
value: function() {
198+
return { prop: 'objA.prop' };
199+
}
200+
},
201+
propB: {
202+
value: 'prop-b'
203+
},
204+
objB: {
205+
value: function() {
206+
return { prop: 'objB.prop' };
207+
}
208+
}
209+
},
210+
observers: [
211+
'outerObjChanged(outerObj.*)',
212+
'objAChanged(objA.*)',
213+
'objBChanged(objB.*)'
214+
],
215+
outerObjChanged: function() {},
216+
objAChanged: function() {},
217+
objBChanged: function() {}
218+
});
219+
220+
</script>
221+

0 commit comments

Comments
 (0)