聚合物动态创建的元素不起作用(iron-scroll-threshold)

时间:2016-03-25 19:49:03

标签: javascript polymer polymer-1.0

我想创建感觉像Facebook的通知。我使用聚合物和元素:iron-dropdowniron-listiron-scroll-threshold。我想在下拉列表打开后创建一个iron-scroll-threshold元素。当我首先创建它时,它将触发一个事件并开始加载,所以我像这样使用它:

 <template>
        <iron-ajax
                id="ajax"
                url="some url"
                handle-as="json"
                on-response="_handleResponse">
        </iron-ajax>

        <paper-button class="status-bar-button" on-tap="open">
            <iron-icon icon="social:notifications-none"></iron-icon>
        </paper-button>

        <iron-dropdown id="dropdown"
                       vertical-align="[[verticalAlign]]"
                       horizontal-align="[[horizontalAlign]]"
                       disabled="[[disabled]]"
                       open-animation-config="[[openAnimationConfig]]"
                       close-animation-config="[[closeAnimationConfig]]"
                       horizontal-offset="[[horizontalOffset]]"
                       vertical-offset="[[verticalOffset]]">

            <div id="sidebar-apps-container" class="dropdown-content shadow-elevation-8dp">
                <div class="beeper" style="right:128px"></div>
                <div class="apps-body" id="scrollThresholdtarget">
                    <iron-list id="zoznam" items="[]" as="notifs" scroll-target="scrollThresholdtarget">
                        <template>
                            <a href="[[notifs.link]]" style="height: 150px">[[notifs.content]]</a><br/>
                        </template>
                    </iron-list>
                </div>
            </div>
        </iron-dropdown>

        <div id="forThreshold"></div>
    </template>

脚本是这样的:

open: function () {
    if (!this.scrollInitialised) {
        this.initScrollThreshold();
        this.scrollInitialised = true;
    }

    this.$.dropdown.open();
},

/**
 * @method
 */
initScrollThreshold: function () {
    var scrollThreshold = document.createElement('iron-scroll-threshold');
    scrollThreshold.setAttribute('id', 'threshold');
    scrollThreshold.setAttribute('on-lower-threshold', '_loadData');
    scrollThreshold.setAttribute('lower-threshold', '200');
    scrollThreshold.setAttribute('scroll-target', 'scrollThresholdtarget');
    this.$.forThreshold.appendChild(scrollThreshold);
    this._loadData();
},

/**
 * @method
 */
_handleResponse: function (event) {
    var data = event.detail.response;

    console.log(data);
    var elem = this.$.zoznam;

    data.forEach(function(notifs) {
        elem.push('items', notifs);
    });

    document.querySelector('#threshold').clearTriggers();
    console.log('fired');
},

/**
 * @method
 */
_loadData: function() {
    console.log('fired request');
    this.$.ajax.generateRequest();
}

但是当创建元素时,它不起作用。该活动永远不会被解雇。

1 个答案:

答案 0 :(得分:1)

您是否尝试过将addEventListener用于您尝试通过属性绑定的事件?我的猜测是没有得到正确的处理(因为Polymer不支持程序化绑定的东西)。