Polymer 下拉数据与 AJAX 响应绑定

Question

我对 JS 和 Polymer 很陌生。无法弄清楚为什么这不起作用，我已经根据那里的几个主题重写了它一百万次。

想法是有一个非常简单的下拉菜单，其选择数据绑定到 AJAX 请求的响应。

根据日志记录，AJAX 完美返回，但数据未绑定。

有人可以帮忙吗？

AJAX 响应：

var text = '{ "employees" : [' +
            '{ "firstName":"John" , "lastName":"Doe" },' +
            '{ "firstName":"Anna" , "lastName":"Smith" },' +
            '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

脚本和导入（可能比应该的多，我正在试验组件）

<script src="../../static/bower/webcomponentsjs/webcomponents.js"></script>
<script src="../../static/npm/jquery/dist/jquery.js"></script>
<script src="../../static/npm/webanimations/web-animations.min.js"></script>    

<link rel="import" href="../../static/bower/font-roboto/roboto.html">
<link rel="import" href="../../static/bower/core-header-panel/core-header-panel.html">
<link rel="import" href="../../static/bower/core-toolbar/core-toolbar.html">
<link rel="import" href="../../static/bower/paper-tabs/paper-tabs.html">
<link rel="import" href="../../static/bower/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../static/bower/core-ajax/core-ajax.html">
<link rel="import" href="../../static/bower/polymer/polymer.html">
<link rel="import" href="../../static/bower/core-list/core-list.html">
<link rel="import" href="../../static/bower/core-collapse/core-collapse.html" >
<link rel="import" href="../../static/bower/core-menu/core-menu.html">
<link rel="import" href="../../static/bower/paper-dropdown/paper-dropdown.html">
<link rel="import" href="../../static/bower/paper-item/paper-item.html">

HTML

<body>

<polymer-element name="custom-selector" attributes="host data">
    <template>
        <template if="{{data.length == 0}}">
            <core-ajax auto 
                url="dosql" 
                on-core-response="{{updateData}}" 
                on-core-error="{{onError}}"
                response="{{yourData}}"
            </core-ajax>
        </template>
        <paper-dropdown-menu label="Dropdown with Data" on-core-select="{{selectData}}">
            <paper-dropdown class="dropdown">
            <core-menu class="menu">
                <template repeat="{{data in yourData}}">
                        <paper-item name="{{data.firstName}}">{{data.firstName}}</paper-item>
                </template>
            </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>
    </template>

    <script>
        Polymer('custom-selector', {
            ready: function () { console.log('firing ready');
                this.host = this.host || 'example.com'; 
                this.data = this.data || []; 
            },
            onError: function (e, resp) { console.log('onError');
                console.log('error!: ' + resp.response);
            },
            updateData: function (e, resp) { console.log('firing updateData');
                console.log('AJAX response:');
                console.log(JSON.parse(resp.response));
                this.data = JSON.parse(resp.response);

                console.log('this.data is now:');
                console.log(this.data);
            }
        });
    </script>
</polymer-element>



<custom-selector></custom-selector>

</body>

Answer 1

<template repeat="{{data in yourData}}">

yourData不是数组，是对象。您要实现的目标是：

<template repeat="{{data in yourData.employees}}">

我冒昧地对您的元素进行了一些改进。我希望你能从中学习，如果你需要进一步的解释，请随时询问。

<polymer-element name="custom-selector" attributes="host data">
<template>
    <core-ajax 
        id="employeesgetter"
        handleAs="json"
        url="dosql" 
        on-core-error="{{onError}}"
        response="{{data}}">
    </core-ajax>
    <paper-dropdown-menu label="Dropdown with Data" on-core-select="{{selectData}}">
        <paper-dropdown class="dropdown">
            <core-menu class="menu">
                <template repeat="{{employee in data.employees}}">
                    <paper-item name="{{employee.firstName}}">{{employee.firstName}}</paper-item>
                </template>
            </core-menu>
        </paper-dropdown>
    </paper-dropdown-menu>
</template>

<script>
    Polymer('custom-selector', {
        data: {
            employees: []
        },
        ready: function () { 
            console.log('firing ready');
            this.host = this.host || 'example.com'; 
            this.$.employeesgetter.go();
        },
        onError: function (e, resp) { 
            console.log('onError');
            console.log('error!: ' + resp.response);
        }
    });
</script>
</polymer-element>

Polymer 下拉数据与 AJAX 响应绑定

Polymer dropdown data binding with AJAX response

javascript

data-binding

ajax

polymer