我尝试通过模板重复使用滑动页面.
<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,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,3];
},ready: function(){
this.values=[1,3];
}
});
</script>
</dom-module>
如果它们是聚合物的另一个滑动页面元素,可以动态改变,我将很高兴知道.
如果他们是一个黑客解决方案(如动态加载所有元素),它也可以
谢谢.
解决方法
快速修复是修改滑动页面的源代码.
首先,找到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或附加内部初始化阵列.
ready: function() {
console.log(this);
this.values = [1,3];
}
应该这样做！
