我的功能是第一次正确执行。但在点击查看时，更多数据不会改变。使用警报，我交叉检查我的数据数量正在增加，但这种变化并没有反映在温带中。
<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>
答案 0 :(得分：0)
添加到数组不会触发聚合物绑定也会侦听的事件。您需要使用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>