Polymer 1.x：强制访问dom-if模板中的DOM节点

Question

I want to access by its id a DOM node inside a dom-if template. 我想通过其id访问dom-if模板中的DOM节点。 With my existing code, I expect to see true when attempting to cast these nodes to Booleans, but instead I get false (ie, undefined ). 使用我现有的代码，我希望在尝试将这些节点转换为布尔true时会看到true ，但是我会得到false （即undefined ）。

Steps to recreate the problem: 重新创建问题的步骤：

Open this jsBin . 打开此jsBin 。
Understand that the HTML pane on the right is working correctly by showing Foo and Bar and not showing Baz . 通过显示Foo和Bar而不显示Baz了解右侧的HTML窗格是否正常工作。
Observe the console and understand the id="foo" node is accessible but the id="bar" and id="baz" elements are not. 观察控制台，了解id="foo"节点是可访问的，但id="bar"和id="baz"元素不可访问。 And this is my problem. 这是我的问题。

How can I access those nodes imperatively? 如何强制访问那些节点？

http://jsbin.com/kemoravote/1/edit?html,console,output 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>

Answer 1

The $ selector won't work. $选择器不起作用。 You have to use $$ as follows: 您必须按如下方式使用$$ ：

console.log('baz', !!this.$$('#baz'));

Here is the jsBin . 这是jsBin 。

http://jsbin.com/xogediyato/1/edit?html,console,output 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>

Polymer 1.x：强制访问dom-if模板中的DOM节点

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-10 02:41:17

Polymer 1.x：强制访问dom-if模板中的DOM节点

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-10 02:41:17

解决方案1
0 已采纳 2016-09-10 02:41:17