重复创建页面
我尝试通过模板重复使用滑动页面。
<swipe-pages>
<template is="dom-repeat" items="{{values}}">
<swipe-page>
<div>
Text to swipe
</div>
</swipe-page>
</template>
</swipe-pages>
在我写的聚合物中
created: function() {
console.log(this);
this.values = [1,2,3];
}
它给了我错误
Uncaught TypeError: Cannot set property 'values' of undefined
Polymer.created
Polymer.Base._addFeature._invokeBehavior
Polymer.Base._addFeature._doBehavior
Polymer.Base.createdCallback
window.Polymer
(anonymous function)
Polymer.DomApi.DomApi._addNode
我无法得到它的工作。
也可以使用
ready:function(){this.values=[1,2,3];};
不起作用。 在这种情况下，它会抛出它们为0页的异常。
我认为模板重复运行后，滑动页面没有收到输入。
如果我不通过模板写它，它工作正常..
更新：
这是所有的聚合物元素。
<dom-module id="element-element">
<template>
<swipe-pages>
<template is="dom-repeat" items="{{values}}">
<swipe-page>
<div>
text
</div>
</swipe-page>
</template>
</swipe-pages>
</template>
<script>
Polymer({
is:'element-element',
created: function() {
this.values = [1,2,3];
},
ready: function(){
this.values=[1,2,3];
}
});
</script>
</dom-module>
如果他们是可以动态改变的聚合物的另一个滑动页面元素，我将很乐意知道。
如果他们是一个黑客解决方案（如动态加载所有元素），它也会好的
谢谢。
快速修复是修改swipe-pages的源代码。
首先，去查找selectedChanged函数，并在顶部添加此检查 -
selectedChanged: function (newValue, oldValue) {
if (oldValue === undefined) {
return;
}
if (newValue >= this.pageCount || newValue < 0) {
....
然后，因为resetPositions和resetWidths被调用得太早，您需要替换以下内容
ready: function () {
this.resetPositions();
this.resetWidths();
}
同
attached: function () {
this.async(function () {
this.resetPositions();
this.resetWidths();
}, 5);
以确保页面已经通过dom-repeat呈现。
最后，确保你ready或attached了数组。
ready: function() {
console.log(this);
this.values = [1,2,3];
}
这应该做到这一点！
请看看这个：氩气可翻页！
<argon-swipeable-pages items="[[ data ]]" as="person" index-as="pix">
<template>
<p>Name: [[ person.name ]]</p>
<p>Age: [[ person.age ]]</p>
<p>Index: [[ pix ]]</p>
</template>
</argon-swipeable-pages>