폴리머 편도 바인딩 작동하지 않음

Question

내 기능이 처음으로 올바르게 실행됩니다. 그러나 클릭하면 더 많은 데이터보기가 변경되지 않습니다. 경고를 사용하여 데이터 수가 증가했지만 변경 사항이 강도로 반영되지 않았는지 확인했습니다.

<div class="container-fluid"> 
    <br><br><br> 
    <div class="col-sm-12"> 
       <div class="col-sm-3"></div> 
       <div class="col-sm-9"> 
       <div id="none"></div> 
        <template is="dom-bind" id="app"> 
        <div class="col-sm-3"> 
         <template is="dom-repeat" items="[[array1]]"> 
          <div class="thumbnail" style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
            <img src="[[item.featured_src]]"> 
            <div class="caption"> 
             <h4>[[item.title]] </h4> 
             <p> in <em> [[item.categories]]</em></p> 
             <p>SKU : [[item.sku]]</p> 
             <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
            </div> 
          </div> 
         </template> 
        </div> 
        <div class="col-sm-3"> 
         <template is="dom-repeat" items="[[array2]]"> 
          <div class="thumbnail" style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
            <img src="[[item.featured_src]]"> 
            <div class="caption"> 
             <h4>[[item.title]] </h4> 
             <p> in <em> [[item.categories]]</em></p> 
             <p>SKU : [[item.sku]]</p> 
             <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
            </div> 
          </div> 
         </template> 
        </div> 
        <div class="col-sm-3"> 
         <template is="dom-repeat" items="[[array3]]"> 
          <div class="thumbnail " style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
            <img src="[[item.featured_src]]"> 
            <div class="caption"> 
             <h4>[[item.title]] </h4> 
             <p> in <em> [[item.categories]]</em></p> 
             <p>SKU : [[item.sku]]</p> 
             <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
            </div> 
          </div> 
         </template> 
        </div> 
        <div class="col-sm-3"> 
         <template is="dom-repeat" items="[[array4]]"> 
          <div class="thumbnail " style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
            <img src="[[item.featured_src]]"> 
            <div class="caption"> 
             <h4>[[item.title]] </h4> 
             <p> in <em> [[item.categories]]</em></p> 
             <p>SKU : [[item.sku]]</p> 
             <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
             <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
            </div> 
          </div> 
         </template> 
        </div> 
        <div class="col-sm-12 mybtndiv"><a onClick="products();" class="mybtn">View More</a></div> 

        </template> 
       </div> 
    </div> 

    </div><!-- container --> 
    <script> 
    var sumeet = {}; 

    window.addEventListener("WebComponentsReady", function(){ 

     sumeet = document.getElementById("app"); 

    }); 
     var array1=[]; 
     var array2=[]; 
     var array3=[]; 
     var array4=[]; 
    var start=24; 
    products(); 
    function products() 
    { 
     $.get('/buyer/productsdata/0&'+start, function(data) { 
     var i=0; 
     alert(i); 
     while(i<data.length) 
     { 
      if(i%4==0) 
      array1[i/4]=data[i]; 
      else if(i%4==1) 
      array2[Math.floor(i/4)]=data[i]; 
      else if(i%4==2) 
      array3[Math.floor(i/4)]=data[i]; 
      else if(i%4==3) 
      array4[Math.floor(i/4)]=data[i]; 
      i++; 

     } 
     sumeet.array1=array1; 
     sumeet.array2=array2; 
     sumeet.array3=array3; 
     sumeet.array4=array4; 
     alert(array1); 
     if(sumeet.array1.length<1) 
     { 
     var push="<h4 style='text-align:center'> No results found </h4>"; 
      $('#none').append(push); 
     } 
     }); 
     start=start+12; 
    }; 
    </script> 

Answer 1

배열을 추가해도 폴리머 바인딩이 수신 대기하는 이벤트가 발생하지 않습니다. 배열 변경 이벤트를 제대로 시작하려면 Polymer의 배열 함수를 사용해야합니다. array docs을 참조하십시오. 또한 사용자 정의 요소를 만든 경우 더 쉬울 것입니다.

경고 : 경고 : 로컬로 실행하지 않으려 고 시도했지만, 이것은 사용자에게 도움이되는 예일뿐입니다. 아주 예를의

<link rel="import" href="../bower_components/polymer/polymer.html"> 

<dom-module id="custom-element"> 

<template> 
<style> 

</style> 
       <div class="col-sm-3"> 
        <template is="dom-repeat" items="[[array1]]"> 
         <div class="thumbnail" style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
           <img src="[[item.featured_src]]"> 
           <div class="caption"> 
            <h4>[[item.title]] </h4> 
            <p> in <em> [[item.categories]]</em></p> 
            <p>SKU : [[item.sku]]</p> 
            <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
           </div> 
         </div> 
        </template> 
       </div> 
       <div class="col-sm-3"> 
        <template is="dom-repeat" items="[[array2]]"> 
         <div class="thumbnail" style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
           <img src="[[item.featured_src]]"> 
           <div class="caption"> 
            <h4>[[item.title]] </h4> 
            <p> in <em> [[item.categories]]</em></p> 
            <p>SKU : [[item.sku]]</p> 
            <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
           </div> 
         </div> 
        </template> 
       </div> 
       <div class="col-sm-3"> 
        <template is="dom-repeat" items="[[array3]]"> 
         <div class="thumbnail " style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
           <img src="[[item.featured_src]]"> 
           <div class="caption"> 
            <h4>[[item.title]] </h4> 
            <p> in <em> [[item.categories]]</em></p> 
            <p>SKU : [[item.sku]]</p> 
            <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
           </div> 
         </div> 
        </template> 
       </div> 
       <div class="col-sm-3"> 
        <template is="dom-repeat" items="[[array4]]"> 
         <div class="thumbnail " style="border:none;box-shadow: 3px 3px 12px -2px rgba(102,102,102,0.66);border-radius: 5px;border:1px solid #F1F1F1;"> 
           <img src="[[item.featured_src]]"> 
           <div class="caption"> 
            <h4>[[item.title]] </h4> 
            <p> in <em> [[item.categories]]</em></p> 
            <p>SKU : [[item.sku]]</p> 
            <a href="#" class="btn btn-info btn-xs" role="button">Book Meeting</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Advertise</a> 
            <a href="#" class="btn btn-info btn-xs" role="button">Products</a> 
           </div> 
         </div> 
        </template> 
       </div> 
       <div class="col-sm-12 mybtndiv"><a on-tap="_handleProducts" class="mybtn">View More</a></div> 

       </template> 

<script> 
    // element registration 
    Polymer({ 
     is: "custom-element", 

     ready: function() { 
      //console.log("test is ready"); 
     }, 

     // add properties and methods on the element's prototype 

     properties: { 
    array1: { 
     type: Array, 
     value: function() {return []}, 
     notify: true 
    }, 
    array2: { 
     type: Array, 
     value: function() {return []}, 
     notify: true 
    }, 
    array3: { 
     type: Array, 
     value: function() {return []}, 
     notify: true 
    } 
    array4: { 
     type: Array, 
     value: function() {return []}, 
     notify: true 
    }, 
    start: { 
     type: Number, 
     value: 24, 
     notify: true 
    } 
}, 

_handleProducts: function() { 
    $.get('/buyer/productsdata/0&'+start, function(data) { 
     var i=0; 
     alert(i); 
     while(i<data.length) 
     { 
      if(i%4==0) 
      this.array1[i/4]=data[i]; 
      else if(i%4==1) 
      this.array2[Math.floor(i/4)]=data[i]; 
      else if(i%4==2) 
      this.array3[Math.floor(i/4)]=data[i]; 
      else if(i%4==3) 
      this.array4[Math.floor(i/4)]=data[i]; 
      i++; 

     } 

     alert(array1); 
    }); 

    this.start += 12; 
} 

    }); 
</script>