Skip to content

Commit 348896a

Browse files
author
Steven Orvell
committed
added render method to dom-bind which can be called when async imports are used; documented template render functions
1 parent 89a767c commit 348896a

4 files changed

Lines changed: 79 additions & 5 deletions

File tree

‎src/lib/template/dom-bind.html‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,18 @@
6868
created: function() {
6969
// Ensure dom-bind doesn't stamp until all possible dependencies
7070
// have resolved
71-
Polymer.ImportStatus.whenLoaded(this._readySelf.bind(this));
71+
Polymer.ImportStatus.whenLoaded(this._markImportsReady.bind(this));
72+
},
73+
74+
_ensureReady: function() {
75+
if (!this._readied) {
76+
this._readySelf();
77+
}
78+
},
79+
80+
_markImportsReady: function() {
81+
this._importsReady = true;
82+
this._ensureReady();
7283
},
7384

7485
_registerFeatures: function() {
@@ -114,6 +125,22 @@
114125
},
115126

116127
attached: function() {
128+
if (this._importsReady) {
129+
this.render();
130+
}
131+
},
132+
133+
detached: function() {
134+
this._removeChildren();
135+
this.fire('dom-change');
136+
},
137+
138+
/**
139+
* Forces the element to render its content. This is typically only
140+
* necessary to call if HTMLImports with the async attribute are used.
141+
*/
142+
render: function() {
143+
this._ensureReady();
117144
if (!this._children) {
118145
this._template = this;
119146
this._prepAnnotations();
@@ -126,10 +153,6 @@
126153
}
127154
this._insertChildren();
128155
this.fire('dom-change');
129-
},
130-
131-
detached: function() {
132-
this._removeChildren();
133156
}
134157

135158
});

‎src/lib/template/dom-if.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,13 @@
8484
}
8585
},
8686

87+
/**
88+
* Forces the element to render its content. Normally rendering is
89+
* asynchronous to a provoking change. This is done for efficiency so
90+
* that multiple changes trigger only a single render. The render method
91+
* should be called if, for example, template rendering is required to
92+
* validate application state.
93+
*/
8794
render: function() {
8895
this._flushTemplates();
8996
},

‎src/lib/template/dom-repeat.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,13 @@
302302
}
303303
},
304304

305+
/**
306+
* Forces the element to render its content. Normally rendering is
307+
* asynchronous to a provoking change. This is done for efficiency so
308+
* that multiple changes trigger only a single render. The render method
309+
* should be called if, for example, template rendering is required to
310+
* validate application state.
311+
*/
305312
render: function() {
306313
// Queue this repeater, then flush all in order
307314
this._fullRefresh = true;

‎test/unit/dom-bind.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,43 @@
168168
assert(!document.body.contains(el2));
169169
});
170170

171+
test('dom-bind distributed when inserted in element attached', function(done) {
172+
var el = document.createElement('x-attach-dom-bind');
173+
document.body.appendChild(el);
174+
setTimeout(function() {
175+
assert.equal(el.$.local.textContent, 'hey', 'dom-bind did not distribute');
176+
document.body.removeChild(el);
177+
done();
178+
})
179+
});
180+
181+
test('dom-bind distributed when inserted in element attached (flush)', function() {
182+
var el = document.createElement('x-attach-dom-bind');
183+
document.body.appendChild(el);
184+
Polymer.dom.flush();
185+
assert.equal(el.$.local.textContent, 'hey', 'dom-bind did not distribute');
186+
document.body.removeChild(el);
187+
});
188+
189+
test('dom-bind distributed when inserted dynamically', function(done) {
190+
var el = document.createElement('x-compose');
191+
document.body.appendChild(el);
192+
Polymer.dom.flush();
193+
setTimeout(function() {
194+
var t = document.createElement('template', 'dom-bind'),
195+
span = document.createElement('span');
196+
span.innerHTML = '{{hello}}';
197+
t.content.appendChild(span);
198+
t.hello = 'hey';
199+
Polymer.dom(el.$.local).appendChild(t);
200+
setTimeout(function() {
201+
assert.equal(el.textContent, 'hey', 'dom-bind did not distribute');
202+
document.body.removeChild(el);
203+
done();
204+
});
205+
});
206+
});
207+
171208
});
172209

173210
suite('timing', function() {

0 commit comments

Comments
 (0)