聚合物:当使用iron导入数据时，无法锁定dom内的元素。
聚合物:当使用iron导入数据时，无法锁定dom内的元素。
提问于 2016-11-05 08:48:21
如果数据被硬编码为属性值，我可以在dom-重复中找到目标元素。然而，当使用iron导入数据时，this.$$(selector)返回null。
自定义元素
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"/>
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"/>
<link rel="import" href="../../bower_components/polymer-sortablejs/polymer-sortablejs.html"/>
<dom-module id="sortable-math">
<template>
<style>
:host {
display: block;
}
.math {
display: block;
padding: 20px 0;
border-bottom: 1px solid #cccccc;
}
.total {
border-top: 1px solid #cccccc;
}
</style>
<h1>Math +</h1>
<div id="empty-div"></div>
<iron-ajax
auto
id="numbersDataRequest"
url="../data/numbers.json"
handle-as="json"
on-response="numbersDataResponse">
</iron-ajax>
<div>
<sortable-js>
<template is="dom-repeat" items="{{numbersData}}">
<div id="math-{{index}}" class="math">
<table>
<tr>
<td class="givenNumber" on-click="toggle" toggle-id$="{{index}}">
{{item.givenNumber}}
</td>
</tr>
<tr>
<td class="toAdd">
+ {{item.toAdd}}
</td>
</tr>
<tr>
<td id="total-{{index}}" class="total">?</td>
<td></td>
</tr>
</table>
<iron-collapse id$="collapsible-{{index}}">
<div>Hint</div>
</iron-collapse>
</div>
</template>
</sortable-js>
</div>
</template>
<script>
Polymer({
is: 'sortable-math',
properties: {
numbersData: {
type: Array
}
},
ready: function() {
console.log(this.$$('#empty-div'));
},
_onSort: function(evt){
console.log('sorted');
},
/*
//Not working either
attached: function(){
this.async(function() {
this.$$('#empty-div').innerHTML = 'Empty no more.'; //This works.
console.log(this.$$('#math-1')); //Returns null
});
},
*/
toggle: function (e, detail, sender) {
var target = Polymer.dom(e).rootTarget.getAttribute('toggle-id'),
selector = '#collapsible-' + target;
this.$$(selector).toggle();
console.log(this.$$('#math-1'));
},
numbersDataResponse: function (data) {
//console.log('numbersDataResponse');
this.numbersData = data.detail.response;
this.$$('#empty-div').innerHTML = 'Empty no more.'; //This works.
//Attempt to target element created with dom-repeat
console.log(this.$$('#math-0')); //Returns null
console.log(this.$$('#math-0 #total-0')); //Returns null
console.log(this.$$('#math-0 .total')); //Returns null
}
});
var targetEl = function(ref, selector){
return Polymer.dom(ref).querySelector(selector);
}
</script>
</dom-module>JSON
[
{
"givenNumber": "3",
"toAdd": "2"
},
{
"givenNumber": "?",
"toAdd": "5"
},
{
"givenNumber": "?",
"toAdd": "10"
},
{
"givenNumber": "?",
"toAdd": "7"
}
]附加信息
我想做的是：
- 获取
#math-0 .givenNumber(3)的含量 - 获取
#math-0 .toAdd：(2)的内容 - 计算总数(
5)并将其附加到#math-1 .givenNumber - 获取
#math-1 .givenNumber：(5)的内容 - 获取
#math-1 .toAdd：(5)的内容 - 计算总数(
10)并将其附加到#math-2 .givenNumber
等等..。
视图不需要计算
- 3+2=？
- +5=？
- + 10 =？
- +7=？
计算后的视图
- 3+2=5
- 5+5= 10
- 10 + 10 = 20
- 20 +7= 27
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-05 16:27:48
在中继器有机会盖章之前，您正在查询中继器的项目，这将导致null。您可以在使用Polymer.RenderStatus.afterNextRender()进行下一次呈现之后再查询该项：
Polymer.RenderStatus.afterNextRender(this, () => {
console.log('math-0 (after render)', this.$$('#math-0'));
});...or您可以等到当前微任务(其中包括模板中继器呈现)结束：
this.async(() => {
console.log('math-0 (after microtask)', this.$$('#math-0'))
});
<head>
<base href="https://polygit.org/polymer+1.7.0/polymer-sortablejs+SortableJS+:master/Sortable+RubaXa+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="polymer-sortablejs/polymer-sortablejs.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
:host {
font-family: Roboto, sans-serif;
}
.item {
margin: 20px;
}
</style>
<iron-ajax url="https://jsonplaceholder.typicode.com/posts"
on-response="_onResponse"
auto></iron-ajax>
<sortable-js>
<template is="dom-repeat" items="[[items]]">
<div class="item" id$="item-{{index}}">{{item.title}}</div>
</template>
</sortable-js>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
_onResponse: function(e) {
this.items = e.detail.response;
// The template repeater has not rendered its items yet, so #item-1 would
// not yet exist yet for us to query here.
console.log('item-1 (before render)', this.$$('#item-1'));
// We can use Polymer.RenderStatus.afterNextRender to explicitly wait until
// the next render event before checking for #item-1.
Polymer.RenderStatus.afterNextRender(this, () => console.log('item-1 (after render)', this.$$('#item-1')));
// Alternatively, we can wait until the end of the current microtask (which
// includes rendering the template repeater), before checking for #item-1.
this.async(() => console.log('item-1 (after microtask)', this.$$('#item-1')));
}
});
});
</script>
</dom-module>
</body>
Stack Overflow用户
发布于 2016-11-07 09:25:13
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40436367
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号