我有一个包含iron-list
和iron-ajax
元素的视图,用数据填充它。简化代码:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<dom-module id="my-view2">
<template>
<style>
:host {
display: block;
padding: 10px;
}
</style>
<template is="dom-bind" id="listTemplate" >
<iron-ajax
auto
verbose
url="http://localhost:3003/items"
params='{}'
handle-as="json"
last-response="{{items}}"
debounce-duration="300"></iron-ajax>
<iron-list
id="itemList"
items="[[items]]"
as="item"
scrollTarget="html">
<template>
<div>
<div class="item" tabindex$="[[tabIndex]]">
<p>[[item.description]]</p>
</div>
</div>
</template>
</iron-list>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-view2',
listeners: {
'response': 'responseHandler'
},
behaviors: [Polymer.IronResizableBehavior],
ready: function () {
console.log('my-view2 ready');
},
attached: function () {
console.log('my-view2 attached');
},
responseHandler: function (e, detail) {
console.log('my-view2 ajax response received');
this.notifyResize();
console.log('notifyResize');
console.log('firstVisibleIndex:', this.$.listTemplate.$.itemList.firstVisibleIndex);
console.log('lastVisibleIndex:', this.$.listTemplate.$.itemList.lastVisibleIndex);
},
scrollHandler: function (e) {
console.log('scroll event:',e);
}
});
});
</script>
</dom-module>
我希望在AJAX响应到达后获取firstVisibleIndex
的属性lastVisibleIndex
和iron-list
。
我用它来获取属性:
this.$.listTemplate.$.itemList.firstVisibleIndex
this.$.listTemplate.$.itemList.lastVisibleIndex
我的问题:这是获取iron-list
属性的方法吗?或者有更好/更正确的方法吗?
第一行显示0
的结果,第二行显示undefined
,但当我查看Chrome DevTools时,第二个属性设置为187
- 与响应中返回的对象数相同。
答案 0 :(得分:2)
是的,有一种“更好”的方式。 : - )
聚合物docs on Automatic node finding状态:
元素模板中指定
id
的任何节点都存储在this.$
哈希id
上。
因此,要访问ID为itemList
的节点,您只需执行以下操作:
var itemList = this.$.itemList;
更新问题是您的iron-list
错误地包含在template
中:
<template>
<template is="dom-bind" id="listTemplate" > <!-- unnecesary template -->
...
<iron-list
id="itemList"
items="[[items]]"
as="item"
scrollTarget="html">
<template>
<div>
<div class="item" tabindex$="[[tabIndex]]">
<p>[[item.description]]</p>
</div>
</div>
</template>
</iron-list>
</template>
</template>
删除额外模板可让您使用iron-list
访问this.$.itemList
节点。
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-list/iron-list.html">
</head>
<body>
<my-view2></my-view2>
<dom-module id="my-view2">
<template>
<iron-list id="itemList"
items="[[items]]"
as="item"
scroll-target="html">
<template>
<div>
<div class="item" tabindex$="[[tabIndex]]">
<p>[[item.description]]</p>
</div>
</div>
</template>
</iron-list>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-view2',
properties: {
items: {
type: Array,
value: function() { return [1,2,3,4]; }
}
},
ready: function () {
console.log('my-view2 ready');
console.log('itemList', this.$.itemList);
}
});
});
</script>
</dom-module>
</body>