更新1

Question

我正在使用Polymer的0.5.1版并尝试创建自己的Web组件。第一次尝试是尝试创建一个选择器对象，通过ajax远程填充选项。我在网上找到的所有例子都使用硬编码列表。但是，我的远程选项在下拉菜单之外呈现，在右边作为基本列表呈现 - 我怀疑因为paper-dropdown-menu项在返回ajax数据后没有重新呈现。如何强制刷新/重新呈现嵌入的paper-dropdown-menu元素？或者，我应该如何使用远程数据和纸张下拉菜单？

我查看了文档，但数据绑定似乎是自动的，我无法在Chrome开发工具中找到刷新方法。我在控制台中没有错误，它只是看起来很有趣而且永远不会崩溃。当我选择一个项目时会触发on-core-select方法，因此数据似乎正确绑定。

我的元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/core-selector/core-selector.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/core-signals/core-signals.html">
<link rel="import" href="../elements/custom-selector-item.html">

<polymer-element name="custom-selector" attributes="host objectivebanks">
    <template>
        <template if="{{objectivebanks.length == 0}}">
            <core-ajax auto url="https://{{host}}/objectivebanks" on-core-response="{{updateBankList}}" on-core-error="{{onError}}"></core-ajax>
        </template>
        <paper-dropdown-menu label="Objective Banks" on-core-select="{{publishBankSelect}}">
            <paper-dropdown class="dropdown">
                <core-selector class="menu">
                    <template repeat="{{bank in objectivebanks}}">
                        <custom-selector-item name="{{bank.displayName}}" myId="{{bank.id}}">
                        </custom-selector-item>
                    </template>
                </core-selector>
            </paper-dropdown>
        </paper-dropdown-menu>
    </template>
    <script>
        Polymer('custom-selector', {
            ready: function () {
                this.host = this.host || 'example.com';
                this.objectivebanks = this.objectivebanks || [];
            },
            onError: function (e, resp) {
                console.log('error!: ' + resp.response);
            },
            publishBankSelect: function (e, detail, sender) {
                if (detail.isSelected) {
                    this.fire('core-signal', {
                        'name'  : "bankselected",
                        'data'  : detail.item
                    });
                }
            },
            updateBankList: function (e, resp) {
                console.log('here');
                this.objectivebanks = JSON.parse(resp.response);
            }
        });
    </script>
</polymer-element>

==========================================

更新1

根据Mohammad的建议，我将Polymer（）代码更新为以下内容（仍然无法正常工作）：

Polymer('custom-selector', {
        ready: function () {
            this.host = this.host || 'example.com';
        },
        created: function () {
            this.objectivebanks = this.objectivebanks || [];
        },
        onError: function (e, resp) {
            console.log('error!: ' + resp.response);
        },
        publishBankSelect: function (e, detail, sender) {
            if (detail.isSelected) {
                this.fire('core-signal', {
                    'name'  : "bankselected",
                    'data'  : detail.item
                });
            }
        },
        updateBankList: function (e, resp) {
            console.log('here');
            this.objectivebanks = JSON.parse(resp.response);
        }
    });

Answer 1

解决方案 - 我需要在我的链接导入中加入paper-dropdown.html，并从https://github.com/web-animations/web-animations-js安装最新的web-animations-js。

Polymer下拉菜单 - 通过ajax填充？

更新1

1 个答案: