Polymer 1.x：强制访问dom-if模板中的DOM节点
[英]Polymer 1.x: Imperatively accessing DOM nodes inside a dom-if template
问题描述
我想通过其id访问dom-if模板中的DOM节点。 使用我现有的代码，我希望在尝试将这些节点转换为布尔true时会看到true ，但是我会得到false （即undefined ）。
重新创建问题的步骤：
- 打开此jsBin 。
- 通过显示
Foo和Bar而不显示Baz了解右侧的HTML窗格是否正常工作。 - 观察控制台，了解
id="foo"节点是可访问的，但id="bar"和id="baz"元素不可访问。 这是我的问题。
如何强制访问那些节点？
http://jsbin.com/kemoravote/1/edit?html，控制台，输出 <!doctype html> <head> <meta charset="utf-8"> <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> <link href="iron-form/iron-form.html" rel="import"> </head> <body> <dom-module id="x-element"> <template> <style></style> <div id="foo">Foo</div> <template is="dom-if" if="{{show}}"> <div id="bar">Bar</div> </template> <template is="dom-if" if="{{!show}}"> <div id="baz">Baz</div> </template> </template> <script> (function(){ Polymer({ is: "x-element", properties: { show: { type: Boolean, value: function() { return true; } } }, attached: function() { console.log('foo', !!this.$.foo); console.log('bar', !!this.$.bar); console.log('baz', !!this.$.baz); }, }); })(); </script> </dom-module> <x-element></x-element> </body>
1 个解决方案
解决方案1
0 已采纳 2016-09-10 02:41:17
$选择器不起作用。 您必须按如下方式使用$$ ：
console.log('baz', !!this.$$('#baz'));
这是jsBin 。
http://jsbin.com/xogediyato/1/edit?html，控制台，输出 <!doctype html> <head> <meta charset="utf-8"> <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> <link href="iron-form/iron-form.html" rel="import"> </head> <body> <dom-module id="x-element"> <template> <style></style> <div id="foo">Foo</div> <template is="dom-if" if="{{show}}"> <div id="bar">Bar</div> </template> <template is="dom-if" if="{{!show}}"> <div id="baz">Baz</div> </template> </template> <script> (function(){ Polymer({ is: "x-element", properties: { show: { type: Boolean, value: function() { return true; } } }, attached: function() { console.log('foo', !!this.$.foo); console.log('bar', !!this.$.bar); console.log('baz', !!this.$.baz); console.log('bar', !!this.$$('#bar')); console.log('baz', !!this.$$('#baz')); }, }); })(); </script> </dom-module> <x-element></x-element> </body>
即使条件为false，Polymer 2.0 dom-if渲染模板
[英]Polymer 2.0 dom-if rendering template even though if condition is false
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.