聚合物单向绑定不起作用

Question

我的函数第一次正确执行。但是在点击查看更多数据并没有改变。使用 alert ，我交叉检查了我的数据数量正在增加，但更改并未反映在模板中。

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