javascript – 通过重复创建聚合物滑动页面

我尝试通过模板重复使用滑动页面.

<swipe-pages>
        <template is="dom-repeat" items="{{values}}">
          <swipe-page>
               <div>
                   Text to swipe
               </div>
          </swipe-page>
         </template>
   </swipe-pages>

在我写的聚合物中@H_403_5@

created: function()  {
        console.log(this);
        this.values = [1,2,3];
       }

它给了我错误@H_403_5@

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

我不能让它工作.@H_403_5@

也用@H_403_5@

ready:function(){this.values=[1,3];};

不起作用.在这种情况下,它会抛出异常,即它们是0页.@H_403_5@

我认为在模板重复运行后,滑动页面不会收到输入.@H_403_5@

如果我不是通过模板写它,它可以正常工作..@H_403_5@

更新：@H_403_5@

这是所有的聚合物元素.@H_403_5@

<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>

如果它们是聚合物的另一个滑动页面元素,可以动态改变,我将很高兴知道.@H_403_5@

如果他们是一个黑客解决方案(如动态加载所有元素),它也可以@H_403_5@

谢谢.@H_403_5@

解决方法

快速修复是修改滑动页面的源代码.

首先,找到selectedChanged函数并在最顶部添加此检查 – @H_403_5@

selectedChanged: function (newValue,oldValue) {
    if (oldValue === undefined) {
        return;
    }

    if (newValue >= this.pageCount || newValue < 0) {
        ....

然后,因为过早调用resetPositions和resetWidths,您想要替换以下内容@H_403_5@

ready: function () {
    this.resetPositions();
    this.resetWidths();
}

同@H_403_5@

attached: function () {
    this.async(function () {
        this.resetPositions();
        this.resetWidths();
    },5);

确保页面已经通过dom-repeat呈现.@H_403_5@

最后,确保在ready或附加内部初始化阵列.@H_403_5@

ready: function()  {
    console.log(this);
    this.values = [1,3];
}

应该这样做！@H_403_5@

javascript – 通过重复创建聚合物滑动页面

解决方法

猜你在找的JavaScript相关文章