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