OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview | 6 * @fileoverview |
7 * cr-lazy-render is a simple variant of dom-if designed for lazy rendering | 7 * cr-lazy-render is a simple variant of dom-if designed for lazy rendering |
8 * of elements that are accessed imperatively. | 8 * of elements that are accessed imperatively. |
9 * Usage: | 9 * Usage: |
10 * <template is="cr-lazy-render" id="menu"> | 10 * <template is="cr-lazy-render" id="menu"> |
11 * <heavy-menu></heavy-menu> | 11 * <heavy-menu></heavy-menu> |
12 * </template> | 12 * </template> |
13 * | 13 * |
14 * this.$.menu.get().then(function(menu) { | 14 * this.$.menu.get().show(); |
15 * menu.show(); | |
16 * }); | |
17 */ | 15 */ |
18 | 16 |
19 Polymer({ | 17 Polymer({ |
20 is: 'cr-lazy-render', | 18 is: 'cr-lazy-render', |
21 extends: 'template', | 19 extends: 'template', |
22 | 20 |
23 behaviors: [ | 21 behaviors: [ |
24 Polymer.Templatizer | 22 Polymer.Templatizer |
25 ], | 23 ], |
26 | 24 |
27 /** @private {Promise<Element>} */ | |
28 renderPromise_: null, | |
29 | |
30 /** @private {TemplatizerNode} */ | 25 /** @private {TemplatizerNode} */ |
31 child_: null, | 26 child_: null, |
32 | 27 |
33 /** | 28 /** |
34 * Stamp the template into the DOM tree asynchronously | 29 * Stamp the template into the DOM tree synchronously |
35 * @return {Promise<Element>} Promise which resolves when the template has | 30 * @return {Element} Child element which has been stamped into the DOM tree. |
36 * been stamped. | |
37 */ | 31 */ |
38 get: function() { | 32 get: function() { |
39 if (!this.renderPromise_) { | 33 if (!this.child_) |
40 this.renderPromise_ = new Promise(function(resolve) { | 34 this.render_(); |
41 this._debounceTemplate(function() { | 35 return this.child_; |
42 this.render_(); | |
43 this.renderPromise_ = null; | |
44 resolve(this.getIfExists()); | |
45 }.bind(this)); | |
46 }.bind(this)); | |
47 } | |
48 return this.renderPromise_; | |
49 }, | 36 }, |
50 | 37 |
51 /** | 38 /** |
52 * @return {?Element} The element contained in the template, if it has | 39 * @return {?Element} The element contained in the template, if it has |
53 * already been stamped. | 40 * already been stamped. |
54 */ | 41 */ |
55 getIfExists: function() { | 42 getIfExists: function() { |
56 return this.child_; | 43 return this.child_; |
57 }, | 44 }, |
58 | 45 |
(...skipping 20 matching lines...) Expand all Loading... |
79 | 66 |
80 /** | 67 /** |
81 * @param {string} path | 68 * @param {string} path |
82 * @param {Object} value | 69 * @param {Object} value |
83 */ | 70 */ |
84 _forwardParentPath: function(path, value) { | 71 _forwardParentPath: function(path, value) { |
85 if (this.child_) | 72 if (this.child_) |
86 this.child_._templateInstance.notifyPath(path, value, true); | 73 this.child_._templateInstance.notifyPath(path, value, true); |
87 } | 74 } |
88 }); | 75 }); |
OLD | NEW |