具有 AJAX 响应的聚合物下拉数据绑定答案

【问题标题】：Polymer dropdown data binding with AJAX response具有 AJAX 响应的聚合物下拉数据绑定
【发布时间】：2015-06-10 13:02:40
【问题描述】：

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

【问题讨论】：

标签： javascript ajax data-binding polymer

【解决方案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>

【讨论】：

谢谢你 - 你是对的。进行更改后，下拉菜单仍然是空的，没有错误消息。
您好，您可以尝试使用我发布的元素并报告结果吗？
它很漂亮，是的，很有教育意义 :) 没有错误信息，但下拉菜单是空的。你介意看看我的进口吗？
将handleAs="json" 添加到您的核心ajax。我已经更新了我的代码
:) 这将有很长的路要走——现在我基本上可以开发应用程序了；）谢谢！！！